jQuery防止动画重复执行

来源：互联网发布：js文件什么样编辑：程序博客网时间：2024/05/17 12:57
<!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动画" onclick="Expand()" />    <input type="button" value="收缩侧边div动画" onclick="Shrink()" />    <div id="box">侧边栏</div></body></html>
1 0