顯示另一個事業部時，懸停另一個div的孩子

Question

我要顯示一個div當懸停另一個div的孩子

這裏是我的HTML代碼

<div id='container'> 
    <div> 
     <ul> 
      <li class='hover'>A</li> 
      <li>B</li> 
      <li>C</li> 
     </ul> 
    </div> 
    <div class='hover' id='display'>some text</div> 
</div> 

和我的jQuery代碼

$(".hover").hover(function() { 
    $('#display').show(); 
}, function() { 
    $('#display').hide(); 
}); 

它工作正常，但如果我添加時間的動畫用途的JavaScript代碼，如

show(200); 
hide(200); 

它看起來很有趣。所以如果有人能告訴我如何解決這個問題，我真的很感激。

Answer 1

這是因爲它在上次結束前觸發的新動畫。

最簡單的修復方法是添加stop（）;

$(".hover").hover(function() { 
    $('#display').stop(); 
    $('#display').show(200); 
}, function() { 
     $('#display').stop(); 
    $('#display').hide(100); 
}); 

http://jsfiddle.net/igos/Ck9hv/