jquery禁用单击,直到动画完全完成

Question

我想禁用点击功能,直到其中的每个代码; 初始化和完成.

我阅读了这些文章并尝试了他们所说的但是无法实现: event.preventDefault()与return false + 在jQuery中删除事件处理程序的最佳方法？ + jQuery - 禁用单击直到所有链接的动画完成

我准备了这个问题的简单例子:

这是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

使用on()和off()打开/关闭点击功能:

$('.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);
    });
}?

示范