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?
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);
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.
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").
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With