显示另一个事业部时，悬停另一个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/