Jquery.stop () not working

Question

I am trying to create a menu in which, by default, only the first element is displayed, and when you hover over it, the rest of the elements pop up and hide again when the mouse leaves. It basically works, but if the mouse exits before it finishes popping up, the hide function is not called. I thought stop() should have taken care of this, but it does not seem to be affected.

 $(function(){ $("#menubar").children(".breadcrumbs").children("li + li").hide(); $("#menubar .breadcrumbs").hover(function() { $(this).children("li + li").stop().show("slide", {}, 'slow'); }, function() { $(this).children("li + li").stop().hide("slide", {}, 'slow'); }); }); 

jsFiddle demo

Can anyone understand what I'm doing wrong?

Answer 1

I'm not the biggest animated genius, but I'm sure this is because you are rebuilding the jQuery object in each handler. Try the following:

 $(function(){ var children = $('#menubar .breadcrumbs').children('li + li'); children.hide(); $("#menubar .breadcrumbs").hover(function() { children.stop().show("slide", {}, 'slow'); }, function() { children.stop().hide("slide", {}, 'slow'); }); }); 

edit - @melee notes in the comments that the behavior of this particular installation is not always stable. If you carefully hold the mouse over the right edge of the "Home" <li> (next to the ">" symbol), sometimes the animation sorts the freaks. It is not clear why, but the browser is just very confused about where the elements should be presented.

Answer 2

There are parameters for STOP (), function, (true, true), (false, false), have you tried to change them to change the desired effect?

Answer 3

Defining a Stop Function

 .stop( [ clearQueue ], [ jumpToEnd ] ) 

The official site is coming ...

clearQueue: a boolean value indicating to remove the animation queue. The default is false.

jumpToEnd: a boolean value indicating to complete the current animation immediately. The default is false.

This is from http://api.jquery.com/stop/