mouseenter / mouseleave動畫鏈停止

Question

我不確定該如何命名。 但是我有一個mouseenter / mouseleave行為，可以分別上下滑動菜單。 除非用戶真正快速地將鼠標移入和移出元素幾次，否則它將非常有效。 然后，將觸發所有動畫，並且菜單“變為bezerk”並繼續進行動畫處理。

我想要的是取消綁定mouseenter事件，直到mouseleave事件完成。 我嘗試了幾種不同的方法，包括stop（）和stopPropogation（），但是沒有用。

我可以使用此代碼，但對我來說似乎並不“正確”。

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

Answer 1

這是更新的小提琴， .stop(true,true)在動畫上添加了.stop(true,true) ： http : //jsfiddle.net/maniator/TBxgP/1/

碼：

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

Answer 2

根據您的帖子，我想您已經看到了以下內容：

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

順便說一句，如果您要同時使用mouseenter()和mouseleave() ，我建議使用hover() mouseleave() 。

最終，如果您的解決方案可行，可讀並且可以接受（我認為所有這些都適用於此處），那就很好了。