如何在动画过程中禁用按钮? [英] How to disable button during animation?

问题描述

我只是在尝试禁用动画触发时单击按钮的功能.

I'm simply trying to disable a button's ability to be clicked while an animation is firing.

请注意，在最终使用中，我使用的是jQuery触发的CSS动画，因此我不能仅检查 .is(':animated').

Please note that in the final use, I am using CSS animations fired by jQuery so I can't just check if .is(':animated').

我的解决方案是在动画过程中更改按钮上的活动类，但是jQuery似乎并没有意识到我已经对其进行了更改.

My solution is to change the active class on the button during the animation, but jQuery doesn't seem to be picking up on the fact that I've changed it.

测试用例: 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();
});

推荐答案

您似乎无法使用:animated，为什么不检查单击的button是否具有active类呢?

Seeing as you cant use :animated why not just check if the button you click has a class of active on it?

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

http://jsfiddle.net/GPRnr/

这篇关于如何在动画过程中禁用按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！