仅在动画完成后激活按钮上的事件

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);