的jQuery：錯誤的mouseenter（）鼠標離開（）動畫

我試圖創建頁面的側邊欄垂直滾動菜單與下面的代碼的jQuery： HTML:的jQuery：錯誤的mouseenter（）鼠標離開（）動畫

<ul class="side-menu"> 
<li id="menu1" ><a href="#">Item-1</a> 
    <ul class="inner-side-menu" id="menu1_inner"> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
    </ul> 
</li> 
<li id="menu2"><a href="#">Item-2</a> 
    <ul class="inner-side-menu" id="menu2_inner"> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
    </ul> 
</li> 
<li id="menu3"><a href="#">Item-3</a> 
    <ul class="inner-side-menu" id="menu3_inner"> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
    </ul> 
</li> 
<li id="menu4"><a href="#">Item-4</a> 
    <ul class="inner-side-menu" id="menu4_inner"> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
    </ul> 
</li>

JQuery：

<script type="text/javascript"> 
$('#menu1').mouseenter(function(){ 
    $('#menu1_inner').show('slow'); 
}).mouseleave(function(){ 
    $('#menu1_inner').hide('slow'); 
}); 
//Similar for #menu2, #menu3 and #menu4 
</script>

我得到一個非常weired錯誤，在正常情況下代碼運行良好，但如果我把鼠標移過#menu1/2/3/4並立即離開比相應#menu_inner動畫兩次或三次好像它具有相同的效果多次動畫沒有鼠標進入或葉。

什麼是真正發生在這裏？什麼是解決方案？ p.s .:我在firefox 10，IE9，Maxthon 3和Opera 11中測試了這個錯誤。

來源

2012-02-17 Asif

http://api.jquery.com/stop/ – j08691 2012-02-17 21:02:30

這是因爲動畫進行排隊，他們繼續運行，除非你強行阻止他們。使用stop方法停止以前的動畫。

$('#menu1').mouseenter(function(){ 
    $('#menu1_inner').stop(true, true).show('slow'); 
}).mouseleave(function(){ 
    $('#menu1_inner').stop(true, true).hide('slow'); 
});

stop(clearQueue, jumpToEnd) - 停止對匹配元素當前正在運行的動畫。

來源

2012-02-17 21:04:01 ShankarSangoli

嗯，這工作不錯。但是我可以用這個設置動畫開始時間嗎？我的意思是用'stop'整個'menu_inner'突然打開，它不是長的列表是一件好事，我可以設置時間'mouseenter' 1或秒鐘，然後'顯示這樣的功能等待（）'電話？謝謝 – Asif 2012-02-17 21:22:00

@Asif - 添加定時器將不會是一個好主意，但還是如果你想你可以使用jQuery'.delay（timeInMilliseconds）''調用停止前（）'。 – ShankarSangoli 2012-02-17 21:24:54

_添加計時器不會是一個好主意_ ..爲什麼這樣？ – Asif 2012-02-17 21:27:10

，而不是mouseenter和mouseleave函數u反芻使用hover功能更優雅。

$('#menu1').hover(function() 
{$(this).fadeOut(100);$(this).fadeIn(500);});

這裏是official documentation with example

來源

2012-02-17 21:12:06 Vivek

這不會解決中提到的問題。 'hover'只是'mouseenter' /'mouseleave'的簡寫。 – 2012-02-17 21:15:44

由於@Vivek但是我有使用'mouseenter'和'mouseleave'，因爲我可以很容易地設置不同的動畫效果和時序爲兩個不同的鼠標事件的功能的具體原因。 – Asif 2012-02-17 21:25:06

的jQuery：錯誤的mouseenter（）鼠標離開（）動畫

回答

相關問題