jQuery动画队列和.stop（true）_Jquery_Jquery Animate_Drop Down Menu

jQuery动画队列和.stop（true）

jquery drop-down-menu

jQuery动画队列和.stop（true）,jquery,jquery-animate,drop-down-menu,Jquery,Jquery Animate,Drop Down Menu,首先，这里的最终目标是创建我自己的下拉菜单来学习jQuery。如果我将鼠标移动到导航按钮上或离开导航按钮的速度过快，动画队列将建立起来，动画将在您停止后持续几秒钟。我发现几个论坛线程表明.stop（true）是解决jQuery动画队列累积问题的方法。但是，在语句中使用多个动画时，它似乎无法解决我的问题下面是代码（我省略了CSS）我的第一个下拉菜单 $（文档）.ready（函数（）{ $（“div.bSlider ul li”）。悬停（函数（）{ $（this）.stop（true，true

首先，这里的最终目标是创建我自己的下拉菜单来学习jQuery。如果我将鼠标移动到导航按钮上或离开导航按钮的速度过快，动画队列将建立起来，动画将在您停止后持续几秒钟。我发现几个论坛线程表明.stop（true）是解决jQuery动画队列累积问题的方法。但是，在语句中使用多个动画时，它似乎无法解决我的问题

下面是代码（我省略了CSS）


我的第一个下拉菜单
$（文档）.ready（函数（）{
$（“div.bSlider ul li”）。悬停（函数（）{
$（this）.stop（true，true）.animate（{backgroundColor:{898989'，color:{d01d33}，500，function（）{}）.find（“ul”）.slideDown（200，function（）{}）；
}，函数（）{
$（this）.stop（true，true）.animate（{backgroundColor:#d01d33'，color:#ffc074}，0，function（）{}）.find（“ul”）.slideUp（100，function（）{}）；
});
});

您需要添加一个额外的

.stop（true，true）

来停止向下/向上滑动的部分

编辑：附加信息

需要第二个

.stop（）

的原因是

.stop（）

仅停止选定元素上的动画，而不是其子元素。由于

是所选元素的子元素，因此其动画未停止

<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>

$(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(){});
    });
});