jquery - 悬停另一个 Div 的孩子时显示另一个 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/