1 <!DOCTYPE html>
2 <html>
3 <head >
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>