Question

我试图用javascript动画菜单，但我得到一个奇怪的行为，我不太明白。测试代码在jsfiddle上。如果将鼠标放在“测试”标签上，则应显示子菜单（海军蓝色）。在子菜单中使用鼠标尝试退出，然后快速重新进入。子菜单应该永远闪烁。我想问题在于动画的结尾没有得到妥善处理，但我不太清楚我错在哪里。

<ul id="menu">
    <li>
        Test
        <section class="sub">Test</section>
    </li>
</ul>


.sub {
    display: none;
    width: 100px;
    height: 100px;
    background-color: navy;
    color: white;
}

$('#menu li').hover(function() {
    $('#menu .sub').finish();
    $(this).find('.sub').slideDown(400);
},
function() {
    $('#menu .sub').finish();
    $(this).find('.sub').slideUp(400);
});

Answer 1

修改

试试这个......

$('#menu li').hover(function() { $(this).find(".sub").stop(); $(this).find('.sub').slideDown(400); }, function() { $(this).find(".sub").stop(); $(this).find('.sub').slideUp(400); });

Answer 2

.finish()方法意味着如果有动画，则必须立即完成（并删除队列）。 .stop()方法对您来说更好。

简而言之，您可以使用类似if( $('.sub', this).is(':animated') ) return;的内容来阻止新动画，但仍有一个

编辑：you fiddle modified

闪烁的下拉菜单

2 个答案: