我有一個表格，並附上了一些動畫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.

相關問題