使用jQuery控制动画-优快云博客

本文链接：https://blog.youkuaiyun.com/xdprintf/article/details/49558927

先上代码

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            margin: 3px;
            width: 40px;
            height: 40px;
            position: absolute;
            left: 0px;
            top: 30px;
            background: green;
            display: none;
        }
        div.newcolor {
            background: blue;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <div></div>
    <script>
        $("#start").click(function() {
            $("div").show("slow");
            $("div").animate({
                left: '+=200'
            }, 5000);
            $("div").queue(function() {
                $(this).addClass("newcolor");
                $(this).dequeue();
            });
            $("div").animate({
                left: '-=200'
            }, 1500);
            $("div").queue(function() {
                $(this).removeClass("newcolor");
                $(this).dequeue();
            });
            $("div").slideUp();
        });
        $("#stop").click(function() {
            $("div").queue("fx", []);
            $("div").stop();
        });
    </script>

</body>

</html>

queue的作用就是在动画执行过程中加入自定义动画（一段动画，或者一个jquery代码之类）
用上queue一般就要用到dequeue，dequeue的作用是跳出queue函数让代码或者动画继续执行，
有开始动画就有停止动画
$("div").queue("fx", []);
就是用来结束queue定义的动画，stop（）只能暂停或停止 animate定义的动画