mouseenter / mouseleave animation chain halt
<p>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. </p>

<p>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.</p>

<p>I got this code to work but it doesn't seem "right" to me.</p>

<pre><code> function add_menu_listener(menu, affected){
    $j(menu).mouseenter(function(e){
        $j(menu).unbind('mouseenter');
       $j(menu + " &gt; ul.links").slideDown();
       $j(affected).attr('src', "/images/down_arrow_menu.png");
    }).mouseleave(function(e){
        $j(menu + " &gt; ul.links").slideUp( 500, function(){
           add_menu_listener(menu, affected);
        });
        $j(affected).attr('src', "/images/right_arrow_menu.png");
    });
  }
</code></pre>
