如果离开悬停jQuery如何完成队列答案

【问题标题】：How to finish queue if leave hover jQuery如果离开悬停jQuery如何完成队列
【发布时间】：2013-09-12 09:20:50
【问题描述】：

我在 jquery API 文档的帮助下制作了这个脚本，一切正常。

除了一件事，如果您离开悬停，我想完成当前事件（队列）。如果您离开某个 div，每个球都应该再次变得透明。我一直在寻找很长一段时间来实现这一点，但它没有帮助我。

也许这是一个愚蠢的问题，需要添加 1 行代码。但我希望你能帮我解决这个问题！

这里是 jQuery 代码：

$("#hulp").hover(function() {
        $("#first").delay   ( 100 ); 
        $("#second").delay  ( 200 );
        $("#third").delay   ( 300 );
        $("#fourth").delay  ( 400 );
        $("#fifth").delay   ( 500 );
        $("#sixth").delay   ( 600 );
    $("#first, #second, #third, #fourth, #fifth, #sixth").queue(function() {
        var that = $( this );
            that.addClass("red");
            that.dequeue ();
    });
        $("#fifth").delay   ( 1000 ); 
        $("#sixth").delay   ( 800 );


    $("#fifth, #sixth").queue(function() {
        var that = $( this );
            that.removeClass("red");
            that.addClass("blue");
            that.dequeue();     
    });
        $("#fifth").delay   ( 1200 ); 
        $("#sixth") .delay  ( 1000 );

     $("#fifth, #sixth")    .queue(function() {
        var that = $( this );
            that.removeClass("blue");
            that.dequeue();
            that.clearQueue();
    });
});
$("#hulp2").hover(function() {
        $("#first").delay   ( 100 ); 
        $("#second").delay  ( 200 );
        $("#third").delay   ( 300 );
        $("#fourth").delay  ( 400 );
        $("#fifth").delay   ( 500 );
    $("#first, #second, #third, #fourth, #fifth").queue(function() {
        var that = $( this );
            that.addClass("red");
            that.dequeue ();
    });
        $("#first").delay   ( 1400 ); 
        $("#second").delay  ( 1200 );
        $("#third").delay   ( 1000 );
        $("#fourth").delay  ( 800 );
        $("#fifth").delay   ( 600 );


    $("#first, #second, #third, #fourth, #fifth").queue(function() {
        var that = $( this );
            that.removeClass("red");
            that.addClass("blue");
            that.dequeue();     
    });
        $("#first").delay   ( 2200 ); 
        $("#second").delay  ( 2000 );
        $("#third") .delay  ( 1800 );
        $("#fourth").delay  ( 1600 );
        $("#fifth") .delay  ( 1400 );

   $("#first, #second, #third, #fourth, #fifth").queue(function() {
        var that = $( this );
            that.removeClass("blue");
            that.dequeue();
            that.clearQueue();
            that.finish();
    });
});

【问题讨论】：

标签： jquery hover queue

【解决方案1】：

而不是用 }); 结束悬停在 }

之后添加以下代码

,function(){
    $('.helpen').nextAll('div').stop(true,true).removeClass('red blue');

});

DEMO

【讨论】：

感谢您的帮助，这行得通。我仍然注意到一件小事，但也许你可以帮助我。如果您悬停，然后离开，然后在短时间内再次悬停，它仍然有点麻烦。你能帮我解决这个问题吗？
就像它不会完全关闭队列，它只是隐藏它。

【解决方案2】：

使用on：

$('.fuuu').on({"mouseenter": function(){
        //do something
    },"mouseleave": function(){
        //do something else
    }});

【讨论】：