mouseenter/mouseleave animation chain halt

我不確定如何標題這一個。但我有一個mouseenter/mouseleave行爲，分別向上和向下滑動菜單。除非用戶多次快速地將鼠標移入和移出元素，否則它的效果非常好。然後，所有的動畫被激發，菜單「bezerk」，並繼續動畫。mouseenter/mouseleave animation chain halt

我想要的是解除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"); 
    }); 
    }

來源

2011-05-13 brycemcd

反正有你給我們帶來的jsfiddle或jsbin鏈接？ – 2011-05-13 17:21:29

希望這個問題可以幫助你:) http://stackoverflow.com/questions/4283674/jquery-mouseenter-mouseleave-html-swap-issue – diEcho 2011-05-13 17:26:40

@oscar這裏的鏈接：http://jsfiddle.net/TBxgP/ – brycemcd 2011-05-13 17:30:47

這裏更新與.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"); 
    }); 
    }

來源

2011-05-13 17:35:10 Neal

啊，這太好了。我正在將stop（）應用於事件，而不是受影響的元素。謝謝！ – brycemcd 2011-05-13 18:10:55

@Bryce，沒問題:-)，並記得選擇一個「接受答案」，當你可以^ _ ^ – Neal 2011-05-13 18:13:31

根據您的文章我想你已經看到了這一點，或者是這樣的：

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

順便說一句，我建議使用hover()如果你打算使用兩個mouseenter()和mouseleave()。

最終，如果您的解決方案能夠正常工作，可讀性和可接受性（我認爲所有這些都適用於此），那很好。

來源

2011-05-13 17:35:04

我之前做過這個，但並沒有阻止這種行爲。我更喜歡這個語法，但它仍然令人不快。 – brycemcd 2011-05-13 18:01:03

mouseenter/mouseleave animation chain halt

回答

相關問題