jQuery學習筆記(三)jQuery中的動畫

1 show() 方法和hide() 方法  （顯示和隱藏）

　　　show() 方法和hide() 方法是jQuery中基本的動畫方法。在HTML文檔裏，爲一個元素調用hide() 方法，會將該元素的display樣式改成「none」。

$("element").hide();    //經過hide()方法將element元素隱藏
$("element").css("display","none");    //經過css()方法將element元素隱藏
$("element").show();    //經過show()方法將element元素顯示
$(「element」).show(3000);　　　　//經過show()方法將element元素在3秒種內顯示完成

  　　show() 方法和hide() 方法在不帶任何參數狀況下，至關於css("display","none,block,inline"),做用是離開顯示或隱藏匹配的元素，不會有任何的動畫效果。

　　　若是但願在調用show()方法時，元素慢慢地顯示出來，能夠爲show()方法指定一個速度參數。

　　　例如：$(「element」).show(3000); 在3000毫秒內顯示，即3秒種內顯示完成。這種方法在顯示或者隱藏的時候，內容與透明圖都是漸進的顯示或隱藏的，因此有一種動畫的感受。

2 fadeln() 方法和fadeOut() 方法   （淡入和淡出）

　　　fadeIn()、fadeOut()與show()、hide()的差異就在與它們只改變其透明度，簡單而言，其效果就是要實現淡入、淡出的動畫效果。

3 slideUp() 方法和slideDown() 方法　（滑動）

　　　slideUp()和slideDown()方法與show()、hide()方法的差異就在於其改變的是元素的高度，使元素上下滑動。

4 其餘動畫方法

　　　除了上面提到的動畫方法，jquery中還有4個專門用於交互的動畫方法。

　　　1.toggle()方法

　　　　toggle()方法能夠切換元素的可見狀態。若是元素是可見，則切換爲隱藏的；若是元素是可見，則切換爲隱藏的；

5 自定義動畫方法animate()

　　　不少狀況下，這些方法沒法知足用戶的各類需求，那麼就須要對動畫有更多的控制，須要採起一些高級的自定義動畫來解決這些問題。在jquery中，可使用animate()方法開自定義動畫。

　　　其語法結構爲：animate(params,speed,callback);

　　　參數說明以下：

　　　（1）params: 一個包含樣式屬性及值得映射，好比{property:"value1",property:"value2"...}。

　　　（2）speed: 速度參數，可選。

　　　（3）callback: 在動畫完成是執行的函數，可選。

　　　4.1 自定義簡單動畫