僅在動畫完成後激活按鈕上的事件

Question

我創建一個按鈕，當它被點擊時，移動一些圖像，但當我快速點擊按鈕，jQuery創建一個錯誤的移動的圖像。所以我想禁用按鈕，直到.animate（）函數沒有完成。我嘗試寫這段代碼，但不正確。

var next = $('.next'); 

function nextAction(e){ 
    e.preventDefault(); 
    next.off('click'); 
    if(pellicle.css('left').replace(/[^-\d\.]/g, '') <= -(stepTotalWidth - screenWidth)){ 
     pellicle.animate({ 
      left:'0' 
     },1000, function(){next.on('click', nextAction);}); 
    } 
    else { 
     pellicle.animate({ 
      left:'-=' + screenWidth 
     },1000); 
    } 
} 

next.on('click', nextAction); 

Answer 1

您可以將和你想要的，我沒有得到什麼，當你「關閉」的事件，而動畫的運行，你有O問題與點擊週期的問題exept分離事件很多。

爲此，您可以附加其他活動，以防止違約和第二運行animanion

function nextAction(e){ 
    next.off('click.gallery'); //detach by namespace 
    next.off('click', nextAction); //detach by link on function 

    //Your code and again attach animation click 
} 


next.on('click', function(e){ 
    e.preventDefault(); 
}); 

next.on('click.gallery', nextAction); 
/* .gallery is not necessary if you will detach events 
by the link on the function that attached to that */ 

的第二件事情是，pellicle.css('left')總是在這種情況下返回*** PX略高於正則表達式快會parseInt(pellicle.css('left'), 10) || 0在這種情況下，它總會給你一個數字。通過翻牌

Answer 2

完美解決方案，這裏有完整的代碼

//next button 
function nextAction(e){ 
    next.off('click', nextAction); //detach by link on function 
    e.preventDefault(); 
    if(parseInt(pellicle.css('left')) <= -(stepTotalWidth - screenWidth)){ 
     pellicle.animate({ 
      left:'0' 
     },1000, function(e){next.on('click', nextAction);}); 
    } 
    else { 
     pellicle.animate({ 
      left:'-=' + screenWidth 
     },1000, function(e){next.on('click', nextAction);}); 
    } 
} 
next.on('click', nextAction);