Как закончить очередь, если оставить hover jQuery

Question

Я сделал этот скрипт с помощью документации jQuery API, и все работает нормально.

За исключением одного, я хочу закончить текущее событие (очередь), если вы оставите наведение. Каждый шар должен снова стать прозрачным, если вы оставите определенный div. Я искал довольно долго, чтобы это произошло, но это не помогло мне.

Возможно, это глупый вопрос, и есть 1 строка кода, которую нужно добавить. Но я надеюсь, что ты сможешь мне помочь!

вот jsfiddle

А вот код 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(); 
    }); 
}); 

Answer 1

Вместо прекращения парение с}); добавьте ниже код после}

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

}); 

DEMO

Answer 2

Работа с on:

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