Question

首先 - 这里的最终目标是创建我自己的下拉菜单来学习jQuery。如果我在导航按钮上移动和移动鼠标的速度过快，动画队列就会建立起来并且停止后动画会持续几秒钟。我找到了几个论坛帖子，表明 .stop（true）是jQuery动画队列构建问题的解决方案。但是，在声明中使用多个动画时似乎无法解决我的问题。

这是代码（我省略了CSS。）

<html>
<head>
<title>My First DropDown Menu</title>
<script language="javascript" src="js/jquery-1.7.1.min.js"></script>
<script language="javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/menu.css" />

<script language="javascript">
    $(document).ready(function() {
        $("div.bSlider ul li").hover(function() {
            $(this).stop(true, true).animate({ backgroundColor: "#898989", color: "#d01d33" }, 500, function() {}).find("ul").slideDown(200, function(){});
        }, function() {
            $(this).stop(true, true).animate({ backgroundColor: "#d01d33", color: "#ffc074"}, 0, function() {}).find("ul").slideUp(100, function(){});
        });
    });
</script>

</head>

<body>
<div class="bSlider">
    <ul>
        <a href="#"><li>Menu Item #1</li></a>
        <a href="#"><li>Menu Item #2</li></a>
        <a href="#"><li>Menu Item #3</li></a>
        <a href="#"><li>Menu Item #4</li></a>
        <a href="#"><li>Menu Item #5
            <ul>
                <a href="#"><li>Sub-menu Item #1</li></a>
                <a href="#"><li>Sub-menu Item #2</li></a>
                <a href="#"><li>Sub-menu Item #3</li></a>
                <a href="#"><li>Sub-menu Item #4</li></a>
            </ul>
        </li></a>
        <a href="#"><li>Menu Item #6</li></a>
    </ul>
</div>
</body>

</html>

Answer 1

您需要添加额外的.stop(true,true)才能停止滑行/滑行部分。

http://jsfiddle.net/Tentonaxe/kZ78R/

$(document).ready(function() {
    $("div.bSlider ul li").hover(function() {
        $(this).stop(true, true).animate({ backgroundColor: "#898989", color: "#d01d33" }, 500, function() {}).find("ul").stop(true,true).slideDown(200, function(){});
    }, function() {
        $(this).stop(true, true).animate({ backgroundColor: "#d01d33", color: "#ffc074"}, 0, function() {}).find("ul").stop(true,true).slideUp(100, function(){});
    });
});

编辑：其他信息

您需要第二个.stop()的原因是因为.stop()仅停止所选元素的动画，而不是它的子动画。由于<ul>是所选元素的子元素，因此动画未停止。

jQuery Animation Queue和.stop（true）

1 个答案: