jQuery防止动画重复执行

最新推荐文章于 2022-01-24 14:18:34 发布

xiaoqiu_net

最新推荐文章于 2022-01-24 14:18:34 发布

阅读量3.7k

点赞数 1

分类专栏： jQuery JavaScript Web

本文链接：https://blog.csdn.net/q646926099/article/details/52571632

版权

JavaScript 同时被 3 个专栏收录

28 篇文章 1 订阅

订阅专栏

Web

19 篇文章 0 订阅

订阅专栏

jQuery

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        div {
            position: absolute;
            right: 0px;
            background-color: #abc;
            width: 90px;
            height: 90px;
            margin: 5px;
            display: none;
        }
    </style>
    <script src="jquery-3.1.0.min.js" type="text/javascript"></script>
    <script>

        //判断元素是否在动画效果中,防止连续多次点击动画重复 解决办法1:
        function ElementIsInAnimated(id) {
            return $(id).is(":animated");
        }

        //解决办法2: stop方法，强制上一动画立即结束同时运行下一个动画效果，但会造成界面脱节，不美观

        /*  解决办法3：在animated方法中设置标识,判断动画是否完毕
            var IsOver = false;
            $("xxx").animate({ width: '50%' }, function () {
                IsOver = true;
            });
        */

        function Expand() {
            if ($("#box").is(":hidden")) {
                if (!ElementIsInAnimated("#box")) {
                    $("#box").stop().show().animate({ width: '80%' }, "slow");
                }
            }
        }
        function Shrink() {
            if ($("#box").is(":visible")) {
                if (!ElementIsInAnimated("#box")) {
                    $("#box").stop().animate({ width: 0 }, "fast").hide("fast");
                }
            }
        }
    </script>

</head>
<body>
    <input type="button" value="展开侧边div动画" οnclick="Expand()" />
    <input type="button" value="收缩侧边div动画" οnclick="Shrink()" />
    <div id="box">侧边栏</div>
</body>
</html>