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代码片段

jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法

jQuery源码05 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理

jQuery的DOM操作

jQuery应用 代码片段

jquery12 queue() : 队列方法