jq動畫

今天發表的內容是js動畫，接下來呢 ，我給你們來闡述一下(4點)：

　　1.顯示隱藏動畫效果

　　2.淡入淡出動畫效果

　　3.滑入滑出動畫效果

　　4.自定義動畫

 

   　　顯示與隱藏動畫效果

　　　　show()方法與hide()方法--toggle()方法

　　　　　　show()方法會動態的改變當前元素的高度、寬度和不透明度，最終顯示當前元素，此時元素的css屬性display恢復爲除了none以外的初始值。

　　　　　　show()方法的語法結構爲：

　　　　　　　　　　　　　jQuery隊象.show(duration,[fn]);

　　　　　　　　　　　　　參數duration表示動畫效果運行時間，能夠使用的關鍵字slow、normal和fast,分別對應時間的長度0.6秒、0.4秒和0.2秒，

　　　　　　　　　　　　　參數要加引號；也能夠是用數值，單位默認爲毫秒，此時參數不須要加引號。

　　　　　　

　　　　　　hide()方法會動態改變當前元素的高度、寬度和不透明，最終隱藏當前元素，此時元素的css屬性display修改成none.

　　　　　　　　　　　　　　其語法結構爲：jQuery對象.hide(duration,[fn]);

 

　　　　　　toggle()方法除了能夠模擬鼠標的連續單擊事件以外，同時還會動態地改變當前元素的高度、寬度和不透明度，最終切換當前元素的可見狀態。

　　　　　　　　　　即若是元素是可見的，則被切換爲隱藏狀態；若是元素是隱藏的，則被切換爲可見狀態。

　　　　　　　　　　　　　　其語法結構爲：jQuery對象.toggle(duration,[fn]);

 

 

　　　淡入淡出的動畫效果

　　　　　　fadeIn()方法與fadeOut()方法 fadeIn()方法動態地改變當前元素的透明度(其餘不變)，實現淡入的動畫效果，最終顯示當前元素，

　　　　　　此時元素的css屬性display恢復除了none以外的初始值。

　　　　　　　　　　　　　　fadeIn()方法的格式以下：jQuery對象.fadeIn(duration,[fn]);

　　　　　　

　　　　　　fadeOut()方法動態地改變當前元素的透明度（其餘不變），實現淡出的動畫效果，最終隱藏當前元素，

　　　　　　此時元素的css屬性display修改成none。

　　　　　　　　　　　　　　fadeOut()方法的格式以下：jQuery對象.fadeOut(duration,[fn]);

 

　　　　　　fadeToggle()會動態地改變當前元素的透明度，最終切換當前元素的可見狀態。

　　　　　　即若是元素是可見的，則經過淡出效果切換爲隱藏狀態；若是元素是隱藏的，則經過淡入效果切換爲可見狀態。

　　　　　　　　　　　　　　其語法結構爲：jQuery對象.fadeToggle(duration,[fn]);

 

　　　　　　在jQuery中，fadeIn()和fadeOut()方法經過改變元素的透明度來實現元素的顯示和隱藏，其透明度從0.0到1.0淡入或從1.0到0.0淡出，從而實現淡入淡出的動畫效果；若是要將透明度指定到某一個值，則須要調用fadeTo()方法。

　　　　　　　　　　　　　　fadeTo()的語法格式爲：jQuery對象.fadeTo(duration,opacity,[fn]);

　                                       參數duration爲動畫效果的速度，使用方式與hide()、show()方法等一致；參數opacity用於指定不透明值，取值範圍是0~1，0表明徹底透明，1表明徹底不透明。

 

 

 

　　　 滑入與滑出動畫效果

　　　　　　 slideDown()方法與slideUp()方法

　　　　　　 slideDown()方法會動態地改變當前元素的高度（其餘不變），由上到下滑入，即高度向下增大，使其呈現出一種「滑動」的效果，直至最終顯示當前元素，此時元素的css屬性display恢復爲除了none以外的初始值。

　　　　　　　　　　　　　　slideDown()方法的語法格式以下：jQuery對象.slideDown(duration,[fn]);

　　　　　　　　

　　　　　　slideUp()方法會動態地改變當前元素的高度，由下到上滑出，即高度向上減少，直至最終隱藏當前元素，此時元素的css屬性display修改成none。slideUp()方法的語法格式請參考slideDown()方法。

 

　　　　　　slideToggle()方法會動態地改變當前元素的高度，最終切換當前元素的可見狀態。即若是元素是可見的，則經過滑出效果切換爲隱藏狀態；若是元素是隱藏的，則經過滑入效果切換爲可見狀態。
　　　　　　　　　　　　　　其語法結構爲：JQuery對象.slideToggle(duration,[fn]); 其參數參考show()方法。

 

 

　　　自定義動畫

　　　　　　　　animate()方法能夠動態地改變當前元素的各類css屬性。

　　　　　　　　　　　　　　其語法結構爲：jQuery對象.animate(properties,[duration],[fn]);

　　　　　　　　　　　　　　其中，參數properties使用一個「名：值」形式的對象，用來設置須要改變的css屬性。animate()方法只能改變能夠取數字值的css屬性，如大小屬性（width、height）、邊框屬性（border-width）、外邊距屬性（margin）、內邊距屬性（padding）、定位屬性（top、left、bottom、right）、字體屬性（font-size）、文本屬性（text-indent、letter-spacing、word-spacing）、背景屬性（background-position）和透明度（opacity）。

　　　　　　　　　　　　　　能夠缺省的參數duration和fn請參考show()方法的說明。

 

　　自定義中須要注意的問題：

　　　　　　　　若是要實現頁面中的元素以動畫效果移動，必須首先將元素的「position」屬性設置爲「relative」或「absolute」，不然，沒法移動該元素的位置。

 

　　

　　以上是我所發表的內容，但願對各位有所幫助！