jQuery的：防止堆积动画

我知道还有其他几个职位与此解决方案，但我现在的问题是有点不同。jQuery的：防止堆积动画

我有一个元素的两个事件 - mouseenter和mouseleave。第一个将我的元素的颜色改变为光线，另一个变回黑暗，这会产生闪烁的效果。

问题是，当我进出几次的事件叠加，它闪烁很多次，即使没有新的事件被触发。我想阻止，但.stop()没有帮助。

这里的渔获：我想触发1个闪存不管是什么，但不超过1。因此，当有人在移动/输出 - 事件mouseenter将被解雇，之后mouseleave和之后没有..直到另一个输入/输出被触发。

我想这可以通过锁定（不听）新的事件，当进/出触发了，直到效果完成，但我不知道如何解除绑定和再次绑定。是不是有什么lockEvent()什么的？

来源

2012-02-22 Tony Bogdanov

您是否已经使用.stop（true）或.stop（true，true）？

来源

2012-02-22 23:02:32 kinakuta

不，我还没有..它wonderfuly工作！ – 2012-02-22 23:14:28

您可以尝试只设置一个布尔值VAR和射击只有假的... ...

var anim = { 
    animating: false, 
    over: function(){ 
     if(!anim.animating) 
     { 
      anim.animating = true; 
      // do you animation here 
      // and set your animating bool to false before calling outro... 
      $('#elem').animate({/*some css change*/ }, 1000, function(){ 
       anim.animating = false; 
       anim.out(); 
      }); 
     } 
    }, 
    out: function(){ 
     if(!anim.animating) 
     { 
      anim.animating = true; 
      //do your outro animation here 
      $('#elem').animate({/*some css change*/ }, 1000, function(){ 
       anim.animating = false; 
      }); 
     } 
    } 
};

然后让你的听众来电anim.over和anim.out ...

$('#elem').on('mouseenter', function(){ 
    anim.over(); 
}).on('mouseleave', function(){ 
    anim.out(); 
});

这你可以在输入时调用动画，当前奏完成时，它会自动启动动画动画。

来源

2012-02-22 23:02:49

有伪类jQuery的":animated" 你可以使用它在第一次的mouseenter甚至像：

if ($(this).is(':animated')) { 
    return false; 
}

，以防止更多的动画

来源

2012-02-22 23:08:42

jQuery的：防止堆积动画

回答

相关问题