Question

在此demo中，如果用户在动画期间点击，则会多次触发点击事件。

因此，如果用户点击三次，则点击功能会在每个动画完成后启动动画的三倍。

如何制作click event wouldn't be triggered if the user clicks during the animation？

Answer 1

尝试div:not(:animated)选择器：

$('button').on('click',function(){
    $('div:not(:animated)').animate({'width':'500px'},5000,function(){
         $('div').css({'width':'20px'});   
    });
});

Answer 2

这个怎么样：

$('button').on('click',function(){
    if( $('div').width() == 20 ) {
        $('div').animate({'width':'500px'},5000,function(){
             $('div').css({'width':'20px'});   
        });
    }   
});

Answer 3

还有另一种方法可以解决您的问题，但不能停止触发点击事件：

$('button').on('click',function(){
    if (!$('div').is(':animated'))
    {
        $('div').animate({'width':'500px'},5000,function(){
             $('div').css({'width':'20px'});   
        });
    }
});

Answer 4

有几种方法可以做到这一点，一种是设置一个标志，如果点击了按钮就会跟踪它：

var clicked = false;

$('elm').click(function(){
 if(!clicked){
   clicked = true;
   // continue with animation//
    $('something').animate({
          //animation

     }, time, function(){
        // at the end of animation
        clicked = false
   });
 }
}

Answer 5

或者您可以在动画期间禁用该按钮：

$('button').on('click',function(){
    $('div').animate({'width':'500px'},5000,function(){
         $('div').css({'width':'20px'});   
         $('button').removeAttr('disabled');
    });
    $('button').attr('disabled','disabled');
});

在动画期间取消单击触发器

5 个答案: