Reputation: 4523
I'm not sure how to title this one. But I have a mouseenter/mouseleave behavior that slides a menu up and down respectively. It works great unless the user moves the mouse in and out of the element really quickly several times. Then, all the animations are fired and the menu "goes bezerk" and continues to animate.
What I want is to unbind the mouseenter event until the mouseleave event is complete. I've tried several different approaches including stop() and stopPropogation() but it has not worked.
I got this code to work but it doesn't seem "right" to me.
function add_menu_listener(menu, affected){
$j(menu).mouseenter(function(e){
$j(menu).unbind('mouseenter');
$j(menu + " > ul.links").slideDown();
$j(affected).attr('src', "/images/down_arrow_menu.png");
}).mouseleave(function(e){
$j(menu + " > ul.links").slideUp( 500, function(){
add_menu_listener(menu, affected);
});
$j(affected).attr('src', "/images/right_arrow_menu.png");
});
}
Upvotes: 0
Views: 2687
Reputation: 146310
Here is updated fiddle with .stop(true,true)
added onto the animations: http://jsfiddle.net/maniator/TBxgP/1/
Code:
function add_menu_listener(menu, affected){
$j(menu).mouseenter(function(e){
$j(menu + " > ul.links").stop(true,true).slideDown();
$j(affected).attr('src', "/images/down_arrow_menu.png");
}).mouseleave(function(e){
$j(menu + " > ul.links").stop(true,true).slideUp(500);
$j(affected).attr('src', "/images/right_arrow_menu.png");
});
}
Upvotes: 3
Reputation: 4623
Based on your post I imagine you've seen this, or something like this:
http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup
Incidentally, I suggest using hover()
if you're going to be using both mouseenter()
and mouseleave()
.
Ultimately if your solution works, is readable, and performs acceptably (all of which I think apply here), it's fine.
Upvotes: 0