我有一个表格，并附上了一些动画fadeIn()和。点击按钮切换窗体的显示。但是当我不断点击按钮时，它只是让动画几乎没有停止。更改连续动画

如需更多通关，请参阅此fiddle。

JS：

$(document).ready(function(){ 
    var delay = 500; 
    $(document.body).on('click',"#sign_up_btn",function (e) { 
//  $("#sign_in").hide("slow"); 
//  $("#sign_up").show("slow"); 
     $("#sign_in").fadeOut("slow"); 
     $("#sign_up").delay(delay).fadeIn("slow"); 
     $(this).fadeOut("slow"); 
     $(this).attr("value", "Already have an account?"); 
     $(this).attr("id", "sign_in_btn"); 
     $(this).fadeIn("slow"); 

    }); 
    $(document.body).on('click',"#sign_in_btn",function (e) { 
//  $("#sign_up").hide("slow"); 
//  $("#sign_in").show("slow"); 
     $("#sign_up").fadeOut("slow"); 
     $("#sign_in").delay(delay).fadeIn("slow"); 
     $(this).fadeOut("slow"); 
     $(this).attr("value", "Create An Account"); 
     $(this).attr("id", "sign_up_btn"); 
     $(this).fadeIn("slow"); 
    }); 
});

尝试单击大按钮几次，看到的结果。

我该如何解决这个问题？

来源

2013-07-01 Mohammad Areeb Siddiqui

什么是你的问题？ –

对不起，请尝试多次单击该按钮，然后查看 –

已编辑的问题 –

您的代码无效</input>标签。
_{（P.Suggestion：避免使用tables只要你可以使难以阅读你的HTML标记和样式化的元素。）}

2.

那是因为你不执行之前使用.stop()新fade

另外，您应该在开始新的动画之前使用fade In/Out动画回调。您的代码应该结束这样看：

LIVE DEMO

var $sUp = $("#sign_up"), 
    $sIn = $("#sign_in"); 

$("#content").on('click', "#sign_up_btn", function(){  

    $sIn.stop().fadeOut(800, function(){ 
    $sUp.fadeIn(800); 
    });  
    $(this).stop().fadeOut(800, function(){ 
    $(this).attr({value:"Already have an account?", id:"sign_in_btn"}).fadeIn(800);      
    }); 

}).on('click', "#sign_in_btn", function(){ 

    $sUp.stop().fadeOut(800, function(){ 
    $sIn.fadeIn(800); 
    });  
    $(this).stop().fadeOut(800, function() { 
    $(this).attr({value:"Create An Account", id: "sign_up_btn"}).fadeIn(800);    
    }); 

});

来源

2013-07-01 21:18:19

没有帮助，请尝试单击大按钮几次，看看发生了什么 –

更改连续动画

回答

2.

相关问题