Question

我知道还有其他一些帖子可以解决这个问题，但我目前的问题有点不同。

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

问题是，当我进出几次事件堆栈时，即使没有触发新事件，它也会闪烁很多次。我想阻止这一点，但.stop()没有帮助。

这里有一个问题：我想触发1次闪光，无论是什么，但不超过1.因此，当某人进出时，事件mouseenter将被触发，之后{ {1}}之后没有任何内容......直到触发了另一个输入/输出。

我想这可以通过在触发输入/输出之前锁定（不监听）新事件直到效果完成来实现，但我不知道怎么做而不解除绑定并再次绑定它。是不是有mouseleave或其他什么？

Answer 1

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

Answer 2

jQuery ":animated"中有伪类你可以在第一个mouseenter上使用它，就像：

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

防止其他动画

Answer 3

您可以尝试设置bool var并仅在false时触发...

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();
});

这样你就可以在输入时调用动画，当介绍完成时它会自动触发outro动画。

jQuery：防止堆叠动画

3 个答案: