Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery .stop() not working

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?

like image 752
Brad Mace Avatar asked Mar 23 '11 14:03

Brad Mace


People also ask

How to use stop in jQuery?

The stop() method is an inbuilt method in jQuery which is used to stop the currently running animations for the selected element. Syntax: $(selector). stop(stopAll, goToEnd);

How to stop the animation in js?

The basics of pausing an animation The only way to truly pause an animation in CSS is to use the animation-play-state property with a paused value. In JavaScript, the property is “camelCased” as animationPlayState and set like this: element.

What is jQuery animate?

Definition and Usage. The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").


1 Answers

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.

like image 66
Pointy Avatar answered Sep 28 '22 05:09

Pointy