brycemcd
brycemcd

Reputation: 4523

mouseenter / mouseleave animation chain halt

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

Answers (2)

Naftali
Naftali

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

Matthew Ratzloff
Matthew Ratzloff

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

Related Questions