1

我有一个表格，并附上了一些fadeIn()动画fadeOut()。单击按钮时可切换表单的显示。但是当我连续点击按钮时，它只会让动画几乎不间断地运行。

有关更多间隙，请参阅this 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");
    });
});

尝试多次单击大按钮并查看结果。

我该如何解决这个问题？

4

1 回答 1

1

1.

您的代码中有一个无效</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-01T21:18:19.560 回答