jQuery方法-queue()
Posted 胖了个胖胖
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery方法-queue()相关的知识,希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 div { margin:3px; width:40px; height:40px; 8 position:absolute; left:0px; top:30px; 9 background:green; display:none; } 10 div.newcolor { background:blue; } 11 </style> 12 13 <script type="text/javascript" src="javascript/jquery-1.11.1.js"></script> 14 </head> 15 16 <body> 17 18 请点击这里。。。 19 <div></div> 20 21 <script> 22 $(document.body).click(function () { 23 $("div").show("slow"); 24 $("div").animate({left:‘+=200‘},2000,function(){ 25 $("div").addClass("newcolor");//将需要执行的js代码,加在动画的回调函数中也行 26 }); 27 28 // $("div").queue(function () { 29 // $(this).addClass("newcolor"); 30 // $(this).dequeue(); 31 // }); 32 // $("div").addClass("newcolor");//这种执行失败了,因为动画是延迟排队加载,这个先于动画加载了 33 $("div").animate({left:‘-=200‘},500,function(){ 34 $("div").removeClass("newcolor"); 35 }); 36 // $("div").queue(function () { 37 // $(this).removeClass("newcolor"); 38 // $(this).dequeue(); 39 // }); 40 // $("div").removeClass("newcolor");//执行失败 41 $("div").slideUp(); 42 43 //动画都是异步加载的,但是他们会排队,一个一个执行,但是中间如果要插入一段js执行,则可能必须要加在动画的回调函数中, 44 //才能确保它能顺利执行 45 //但是queue()函数,可以在动画执行队列中,也不需要加在回调函数中 46 //用了queue()函数之后,必须同时搭配dequeue()函数,这样才能执行下一个函数 47 // clearQueue()是清除所有未执行的动画,包括queue()插入的 48 }); 49 </script> 50 51 </body> 52 </html>
以上是关于jQuery方法-queue()的主要内容,如果未能解决你的问题,请参考以下文章
jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法