如何在动画期间禁用按钮？

Question

我只是试图在动画发射时禁用按钮的点击功能.

请注意,在最终使用中,我使用的是jQuery触发的CSS动画,所以我不能只检查 .is(':animated').

我的解决方案是在动画期间更改按钮上的活动类,但是jQuery似乎没有意识到我已经改变了它.

测试用例:http://jsfiddle.net/Ct2TZ/

HTML:

<a href="#" class="button active">Click Me</a>

jQuery的:

var myFunction = function () {
    $('.button').removeClass('active');
    $('.result').append('clicked<br> ');
    $('.result').animate({
        width: '200px'
    }, 2000, function() {        
        $('.result').css({width: '75px'});
        $('.button').addClass('active');
    });
}

// THIS SHOULD NOT WORK DURING ANIMATION
$('.active').on("click", function () {
    myFunction();
});

Answer 1

看到你不能使用:animated为什么不只是检查button你的点击是否有一个类active？

$('.button').on("click", function () {
    if($(this).hasClass('active')){
    myFunction();
    }
});

http://jsfiddle.net/GPRnr/