JQuery中有三種基礎的動畫，分別是：顯示（show）與隱藏（hide）與切換（toggle）、滑入（ slideDown）與滑出（ slidell）與切換（ slide Toggle），效果與捲簾門類似、談入 faden）與淡出 （fadeOut）與切換（fade Toggle）。
首先是顯示（show）與隱藏（hide）與切換（toggle），三種方法的用法是類似的。就簡單說一下關於show()的用法。
1、show（），可以添加兩個參數。
第一個參數：代表執行動畫的時長（毫秒數）也可以是代表時長的字符串（fast、normal和slow）[fast代表的200毫秒，normal代表的事400毫秒，slow代表的事600毫秒]。
第二個參數：代表動畫執行完畢後的回調函數。也就是在動畫執行結束之後想要執行的樣式等操作。
注意：
1、如果show（）方法中沒有參數，就沒有動畫效果。
2、如果代表時長的單詞寫錯了，就相當於寫了一個normal，
3、關於toggle，如果元素是隱藏狀態，執行之後就是顯示狀態，如果是顯示狀態執行之後就是隱藏狀態。
關於hide和toggle的用法，和show的用法基本差不多。
關於運行效果，可以自己試驗一次。
其次是滑入（ slideDown）與滑出（ slidell）與切換（ slide Toggle）。其用法和show的用法差不多，但是有些不一樣的注意事項：
- 動態效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性
- .slideDown()，下拉動畫，初始狀態應爲display:none
- .slideUp( ) 上捲動畫，參數解釋在文章開頭
- .slideToggle( ) 下拉上卷的切換動畫
最後關於談入 faden）與淡出 （fadeOut）與切換（fade Toggle）。其用法和show的用法也差不多，也有一些注意事項：
- 隱藏的元素，display:none，不會在影響頁面的佈局
- .fadeOut( ) 淡出動畫 opacity=>1-0
- .fadeIn( ) 淡入動畫 opacity=>0-1
- .fadeToggle( ) 淡入淡出動畫切換
- .fadeTo（）opactiy => start-endOpacity
最後有一個自定義動畫animate（）
包含四個參數：
第一個參數：必選的 對象， 代表的事需要做動畫的屬性
第二個參數：可選的，代表動畫執行的時長
第三個參數：可選的，easing，代表是緩動還是勻速，【linear(勻速)，swing（緩動），默認不寫是緩動。】
第四個參數：動畫執行之後的回調函數
/*實現div在頁面尚橫向飄動的效果*/ <style> #cube{ position:relative;/* 不加這句元素不能動 */ width:30px; height:30px; background:red; cursor:pointer; } </style> <body> <div> <div id="cube"></div> </div> <script> $(function(){ $("#cube").click(function(){ $(this).animate({left:"100px"},2000) }) }) </script>
