jQuery动画之停止动画

最新推荐文章于 2024-08-20 16:48:16 发布

weixin_33711641

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yang-wei/p/9525754.html

版权

语法格式：

$(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{
            width: 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;
            width: 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>

转载于:https://www.cnblogs.com/yang-wei/p/9525754.html

weixin_33711641

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery动画之停止动画

语法格式：$(selector).stop(true, false);第一个参数:+ ture: 后续动画不执行false：后续动画会执行第二个参数：true: 立即执行完成当前动画false: 立即停止当前动画如果两个参数都不写，默认两个都是false。实际工作中，直接写stop()用的多。案例：鼠标悬停时，弹出下拉菜单(下拉时带动画)<!DOCTYPE ...
复制链接

扫一扫