自定義動畫animate()
在上一節總結了一下3中類型的動畫，其中show()和hide()方法會同時修改元素的多個屬性，fadeOut()和fadeIn()方法只會修改元素的不透明度，而slideDown()和slideUp()方法只會改變元素的高度，但是很多情況下，需要對動畫有更多控制，這些方法無法滿足用戶的需求，這時，jQuery中的自定義動畫animate()就可以用來解決這些高級的動畫問題了。
1，語法結構
首先來看一下該方法的語法結構：animate(params,speed,callback)
- params：一個包含樣式屬性及值的映射
- speed：速度參數，可選
- callback：在動畫完成時執行的函數，可選,
在開始操作前，先在html中新建一個div元素，具體如下，接下的所有操作均在此基礎上進行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-1.3.1.js"></script> <style type="text/css"> #box1{ position:relative; width:100px; height:100px; border:1px solid #0050d0; background-color: #96e555; } </style> </head> <body> <div id="box1"></div> </body> </html>
2，自定義簡單動畫
animate()也可以像前面的方法那樣，讓元素動起來，而且動畫效果可以更加精致新穎。
首先要實現的是鼠標懸浮時元素向右移動。
<script type="text/javascript"> $(function(){ $("#box1").hover(function(){ $(this).animate({left:"100px"},3000); }) }) </script>
上面的代碼能實現鼠標懸浮時，元素移動到距離左邊100px出的位置，移動時間用時3000毫秒。
<script type="text/javascript"> $(function(){ $("#box1").hover(function(){ $(this).animate({left:"+=100px"},3000); }) }) </script>
這段代碼也是讓元素移動，不同的是，這段代碼是讓元素在當前的位置上進行累加的，即繼續向右移動100px,而上面的代碼則與當前位置無關，直接將元素移動到距離左邊100px處。
3，多重動畫
就是執行多個動畫，比如讓元素既能向右滑動，又能放大元素。
<script type="text/javascript"> $(function(){ $("#box1").hover(function(){ $(this).animate({left:"200px",height:"200px"},3000); }) }) </script>
上面這段代碼能同時實現兩個效果，讓元素的向右移動和高度增加同時發生，用時均為3000毫秒。
<script type="text/javascript"> $(function(){ $("#box1").hover(function(){ $(this).animate({left:"200px"},3000); $(this).animate({height:"200px"},3000); }) }) </script>
上面這段代碼也能實現兩個效果，但是兩個效果是分開執行，前3000毫秒用來實現向右移動，移動結束後，後3000毫秒用來實現高度增加。上面的兩個動畫均是對同一個對象進行操作，因此可以采用鏈式的寫法：
<script type="text/javascript"> $(function(){ $("#box1").hover(function(){ $(this).animate({left:"200px"},3000) .animate({height:"200px"},3000); }) }) </script>
向這種動畫的執行效果具有先後順序，稱為“動畫隊列”。
4，綜合動畫
接下來要完成更復雜的動畫，鼠標懸浮的時候，讓元素向右移動的同時增大它的高度，並將它的透明度從50%變換到100%，然後再讓它從上到下移動，同時它的寬度變大，當完成這些效果後，讓它以淡出的方式隱藏。
<script type="text/javascript"> $(function(){ $("#box1").css("opacity","0.5") $("#box1").hover(function(){ $(this).animate({left:"200px",height:"200px",opacity:‘1‘},3000) .animate({top:"200px",width:"200px"},3000) .fadeOut("slow"); }) }) </script>
上面的效果可以分解為3步，第一步是在前3000毫秒同時實現右移動，高度增加和透明度變化，第二步是在第二個3000毫秒同時實現向下移動和寬度增加，第三步實現淡出隱藏，並通過鏈式的方式將這三步進行排隊依次執行。
5，動畫回調函數
如果，我們想在上面的綜合動畫中，將元素的淡出隱藏改為切換元素的css樣式，如果我們繼續采用上面的方法，是不能得到理想的效果的。
<script type="text/javascript"> $(function(){ $("#box1").css("opacity","0.5") $("#box1").hover(function(){ $(this).animate({left:"200px",height:"200px",opacity:‘1‘},3000) .animate({top:"200px",width:"200px"},3000) .css("border","5px solid blue"); }) }) </script>
雖然我們的css寫在了最後面，預期在動畫的最後一步改變元素樣式，但實際情況是，剛開始執行動畫的時候，最後的css()方法就被執行，這是因為css()並不是animate()，不會被加到動畫隊列中，而是立即執行，此時，如果我們想要達到預期的效果，可是使用回調函數對非動畫方法實現排隊。
<script type="text/javascript"> $(function(){ $("#box1").css("opacity","0.5") $("#box1").hover(function(){ $(this).animate({left:"200px",height:"200px",opacity:‘1‘},3000) .animate({top:"200px",width:"200px"},3000,function(){ $(this).css("border","5px solid blue"); }) }) }) </script>
自定義動畫animate()