jquery1.6中queue与$.dequeue
有点抽象!!自做备份 queue("Fx"); 默认为Fx:标准一个队列长度! Html代码 <!DOCTYPE html> <html> <head> <style>div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:60px; background:green; display:none; } div.newcolor { background:blue; } p { color:red; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <button id="show">Show Length of Queue</button> <p></p> <div></div> <script>$("#show").click(function () { var n = $("div").queue("fx"); $("p").text("Queue length is: " + n.length); }); function runIt() { $("div").show("slow"); $("div").animate({left:'+=200'},2000); $("div").slideToggle(1000); $("div").slideToggle("fast"); $("div").animate({left:'-=200'},1500); $("div").hide("slow"); $("div").show(1200); $("div").slideUp("normal", runIt); } runIt();</script> </body> </html> 下面3中解析 Html代码 <!DOCTYPE html> <html> <head> <style>div { margin:3px; width:50px; position:absolute; height:50px; left:10px; top:30px; background-color:yellow; } div.red { background-color:red; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(function(){ // $("button").click(function () { $("div").animate({left:'+=200px'}, 2000); // 1 $("div").animate({top:'0px'}, 600); //2 $("div").queue(function () { //3 $(this).toggleClass("red"); //3.1 $.dequeue(this); }); $("div").animate({left:'10px', top:'30px'}, 700); //4 }); }) </script> </head> <body> <button>Start</button> <div ></div> </body> </html> 测试一下这个demo,大家会发现执行顺序是1,2,3,4完全符合逻辑! 但是为什么加了一个queue和dequeue,如果不加会出现什么情况,于是3这个函数删掉,3.1放到3的位置上, Js代码 $(function(){ // $("button").click(function () { $("div").animate({left:'+=200px'}, 2000); // 1 $("div").animate({top:'0px'}, 600); //2 $(this).toggleClass("red"); //3.1 $("div").animate({left:'10px', top:'30px'}, 700); //4 }); }) 执行!!貌似1和3.1同时执行了,加入断点调试发现没有啊!!但怎么刚开始就变色了,犹豫小弟我没怎么写过动画样式,百思不得其解!后来发现犹豫1中这个动画函数,因为这个函数执行的速度有时间,jquery对动画时间有处理,但对逻辑上的应该是分离!所以执行2000的时候3.1已经执行了