jquery禁用点击，直到动画完全完成

Question

我想禁用点击功能，直到它的每一个代码;初始化并完成。

我读这些文章，并试图他们说什么，但不能做到这一点： event.preventDefault() vs. return false + Best way to remove an event handler in jQuery? + jQuery - Disable Click until all chained animations are complete

我准备简单的例子，对于这样的问题：

This is DEMO

html

<div class="ele">1</div> 
<div class="ele">2</div> 
<div class="ele">3</div> 

jQuery的

$('.ele').click(function() { 

    if (!$('.ele').is(':animated')) {//this works too but; 
         //is:animate duration returns = 2000 but need to be 4000 
     $('.ele').stop().animate({'top':'0px'},2000); 
     $(this).stop().animate({'top':'100px'},4000); 
    } 
    return false; 
}); 
​ 

Answer 1

使用（或关闭（）打开点击功能开启/关闭：

$('.ele').on('click', animateEle); 

function animateEle(e) { 
    $('.ele').stop().animate({'top':'0px'},2000); 
    $(e.target).off('click').stop().animate({'top':'100px'},4000, function() { 
     $(e.target).on('click', animateEle); 
    }); 
}​ 

DEMONSTRATION

Answer 2

你可以试试这个：上）

var exec_a1 = true, exec_a2 = true; 
$('.ele').click(function() { 
    if (exec_a1 && exec_a2) { 
     exec_a1 = false; 
     exec_a2 = false; 

     $('.ele').stop().animate({'top': '0px'}, 2000, function() { 
      exec_a1 = true; 
     }); 
     $(this).stop().animate({'top': '100px'}, 4000, function() { 
      exec_a2 = true; 
     }); 
    } 
    return false; 
});