Question

I’m trying to build a menu where only the first item is shown by default, and when you hover over it the rest of the items slide out, and are hidden again when the mouse leaves. It’s mostly working but if the mouse exits before it’s finished sliding out then the hide function isn’t called. I thought stop() was supposed to take care of this but it doesn’t seem to have any affect.

$(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 anybody see what I’m doing wrong?

Answer 1

I’m not the biggest animation genius, but I bet it has to do with the fact that you’re rebuilding the jQuery object in each handler. Try this:

$(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 points out in comments that the behavior of this particular setup is not always stable. If you carefully hold the mouse over towards the right edge of the “Home” <li> (near the “>” character), then sometimes the animation sort-of freaks out. It’s not clear why, but the browser just gets very confused about where the elements should be rendered.