queue的用法

来源：互联网发布：秦皇岛朗科网络编辑：程序博客网时间：2024/06/12 04:20

先上代码

<!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定义的动画

0 0