Question

我有一段代码，基本上说：如果你翻过来，那么另一件事就会出现，如果你推出，它就会消失。

问题是，如果我用鼠标翻转过多次，那么元素会出现/消失太多次（因为我错误地为它创建了很多事件）

我的代码如下：

$('div.accordionContent').mouseenter(function()
{
    $(this).find(".something").animate({left: 0}, 300)}).mouseleave(function() {
    $(this).find(".something").animate({
    left: -200}, 500);;
});

如何告诉它避免多次悬停？

如果有帮助我使用jQuery 1.4.3 ..

Answer 1

尝试在启动动画之前停止动画，而不是避免多次触发。

$('div.accordionContent').mouseenter(function() {
    $(this).find(".something").stop().animate(...)
});

Answer 2

问题是您在旧事件结束之前触发了新事件。为了防止这种情况，您可以停止侦听（删除侦听器）以用于将来的事件，直到当前事件完成任务为止。

Answer 3

jQuery.animate有一个选项“queue”。如果您将其设置为false，我认为该事件不会触发那么多。我认为=）

Answer 4

如果你想以正确的方式做，我建议

$('div.accordionContent').bind('mouseenter mouseleave', function(e){

    var $something = $(this).find(".something");

    if(e.type == 'mouseenter'){
        $something.animate({left:0}, {queue:false, duration:300 });
    } else {
        $something.animate({left:-200}, {queue:false, duration:500 });
    }
});

Answer 5

你可以尝试这个：

$('div.accordionContent').mouseenter(function(){
    var div = $(this);
    clearTimeout(window.me);
    window.me = setTimeout(function(){
        div.find(".something").animate({left: 0}, 300)}).mouseleave(function(){
            $(this).find(".something").animate({
            left: -200}, 500); 
        });
    },50);
});

这里的想法是，如果尚未达到50延迟，则取消当前的mouseenter。

如何防止鼠标进入/离开太多次

5 个答案: