mouseenter / mouseleave animation chain halt

Question

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");
    });
  }

hope this question helps u :) http://stackoverflow.com/questions/4283674/jquery-mouseenter-mouseleave-html-swap-issue — xkeshav, May 13 '11 at 17:26

score 3 · Accepted Answer · answered May 13 '11 at 17:35

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");
    });
  }

ah, this is great. I was applying stop() to the event, not the affected elements. Thanks! — brycemcd, May 13 '11 at 18:10

score 0 · Answer 2 · answered May 13 '11 at 17:35

0

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.

answered May 13 '11 at 17:35

Matthew Ratzloff

4,518
1
31
35

I did try this before, but it didn't stop the behavior. I like the syntax better, but it still freaks out. – brycemcd May 13 '11 at 18:01

mouseenter / mouseleave animation chain halt

2 Answers2