jQuery动画入门--顺序执行

最近一年多一直在做前端的东西，由于老板在追求一些年轻动感的效果，让页面元素不能仅仅是简单的隐藏显示，所以经常会使用一些动画效果，发现jQuery的动画真心好用啊，把常用的几个总结一下，希望不再每次使用的时候还去翻API

queue()/ dequeue()

这两个方法就像Ajax的XMLHttpRequest对象一样的隐蔽，不为常人所知。这两个方法在动画处理的时候很有用，我们经常会写一些这样的代码

copy 
     
 $('#test').animate({  
             "width": "300px",  
             "height": "300px",  
             "opacity":"1"  
         });  

这样test div的height、width、opacity是同时变化的，有时候我们不希望同步执行，而是形状的变化和透明度的变化分开，先变成300*300的div，然后透明度再逐渐变化，我们需要这么写

copy 
     
 $('#test').animate({  
             "width": "300px",  
             "height": "300px",  
         }, function () {  
             $('#test').animate({ "opacity": "1" });  
         });  

同学们可以想象一下要是有十个动画流程，那代码是什么样的，queue()和dequeue()可以解决此类问题，为所有的流程方法见一个队列，让function依次调用，先看一下语法

queue( [queueName ], newQueue ) 操作欲执行队列方法

第一个参数是队列名称，不写的话默认是fx

第二个参数可以是一个函数数组，存放所有队列函数，也可以是一个回掉函数，用于向队列中添加新函数

dequeue( [queueName ] ) 为匹配元素执行队列中的下一个function

每次调用此方法执行队列中下一函数

[javascript]view plaincopy 
     
 var q = [  
             function () {  
                 $(this).animate({  
                     "width": "200px",  
                     "height":"200px"  
                 }, next)  
             },  
             function () {  
                 $(this).animate({  
                     "width": "400px",  
                     "height": "400px"  
                 }, next);  
             }  
         ];  
   
         function next(){  
             $('#test').dequeue('myQueue');  
         }  
   
         $('#test').queue('myQueue', q);  
         next();  

上面代码就是可以让test div先变成200*200的，然后再变为400*400的，每个动画都执行回掉函数，调用队列中下一个方法，两个动画依次执行.

转自：http://www.cnblogs.com/dolphinX/p/3330174.html

PS:只转了原文的前半部分

参考：http://blog.sina.com.cn/s/blog_6d3f840a0101mmok.html

html代码：

[html]view plaincopy 
     
 <html>  
 <head>  
     <meta charset="UTF-8">  
     <script src="jquery.js"></script>  
 </head>  
 <body>  
     <div style="width:100px;height:100px;background:rgb(255,0,0);" id="test" >  
     </div>  
 </body>  
 <script type="text/javascript">  
 var q = [  
             function () {  
                 $(this).animate({  
                     "width": "200px",  
                     "height":"200px"  
                 }, next)  
             },  
             function () {  
                 $(this).animate({  
                     "width": "400px",  
                     "height": "400px"  
                 }, next);  
             }  
         ];  
   
         function next(){  
             $('#test').dequeue('myQueue');  
         }  
   
         $('#test').queue('myQueue', q);  
         next();  
 </script>  
   
 </html>  