jQuery动画之停止动画

语法格式：

$(selector).stop(true, false);
第一个参数:
+ ture: 后续动画不执行

false：后续动画会执行

第二个参数：

true: 立即执行完成当前动画

false: 立即停止当前动画

如果两个参数都不写，默认两个都是false。
实际工作中，直接写stop()用的多。

案例：鼠标悬停时，弹出下拉菜单(下拉时带动画)

<!DOCTYPE html>
<html>
<head>
    <title>停止动画 Demo</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        ul{
            list-style: none;
        }

        .wrap{
             330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-color: pink;
            display: block;
        }

        .wrap li{
            background-color: green;
        }

        .wrap>ul>li{
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a{
            display: block;
            height: 30px;
             100px;
            text-decoration: none;
            color: #000；
            line-height:30px;
            text-align: center;
        }

        .wrap li ul{
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            var jQuery_li = $(".wrap>ul>li");
            //绑定事件
            jQuery_li.mouseenter(function(event) {
                $(this).children('ul').stop().slideDown(1000);
            });

            jQuery_li.mouseleave(function(event) {
                $(this).children('ul').stop().slideUp(1000);
            });
        })
    </script> 
</head>
<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="javascript:void(0)">一级菜单1</a>
                <ul>
                    <li><a href="javascript:void(0)">二级菜单2</a></li>
                    <li><a href="javascript:void(0)">二级菜单3</a></li>
                    <li><a href="javascript:void(0)">二级菜单4</a></li>
                </ul>
            </li>

            <li>
                <a href="javascript:void(0)">二级菜单1</a>
                <ul>
                    <li><a href="javascript:void(0)">二级菜单2</a></li>
                    <li><a href="javascript:void(0)">二级菜单3</a></li>
                    <li><a href="javascript:void(0)">二级菜单4</a></li>
                </ul>
            </li>

            <li>
                <a href="javascript:void(0)">三级菜单1</a>
                <ul>
                    <li><a href="javascript:void(0)">三级菜单2</a></li>
                    <li><a href="javascript:void(0)">三级菜单3</a></li>
                    <li><a href="javascript:void(0)">三级菜单4</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

jQuery动画之停止动画

语法格式：

案例：鼠标悬停时， 弹出下拉菜单(下拉时带动画)

案例：鼠标悬停时，弹出下拉菜单(下拉时带动画)