上卷下拉效果 （jQuery）

標籤：切換   call   callback   com   透明度   高度   效果   改變   down   

1jQuery中下拉動畫slideDown

對於隱藏的元素，在將其顯示出來的過程中，可以對其進行一些變化的動畫效果。之前學過了show方法，show方法在顯示的過程中也可以有動畫，但是.show()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這裡將要學習一個新的顯示方法slideDown方法

.slideDown()：用滑動動畫顯示一個匹配元素

.slideDown()方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式

常見的操作，提供一個動畫是時間，然後傳遞一個回調，用於知道動畫是什麼時候結束

.slideDown( [duration ] [, complete ] )

期間（duration）是以毫秒為單位的，數值越大，動畫越慢，不是越快。字串 ‘fast‘ 和 ‘slow‘ 分別代表200和600毫秒的延時。如果提供任何其他字串，或者這個duration參數被省略，那麼預設使用400 毫秒的延時。

具體使用：

$("ele").slideDown(1000, function() {    //等待動畫執行1秒後,執行別的動作....});

注意事項：

• 下拉動畫是從無到有，所以一開始元素是需要先隱藏起來的，可以設定display:none
• 如 果提供回呼函數參數，callback會在動畫完成的時候調用。將不同的動畫串聯在一起按順序排列執行是非常有用的。這個回呼函數不設定任何參數，但是 this會設成將要執行動畫的那個DOM元素，如果多個元素一起做動畫效果，那麼要非常注意，回呼函數會在每一個元素執行完動畫後都執行一次，而不是這組 動畫整體才執行一次

2jQuery中上捲動畫slideUp

對於顯示的元素，在將其隱藏的過程中，可以對其進行一些變化的動畫效果。之前學過了hide方法，hide方法在顯示的過程中也可以有動畫，但 是.hide()方法將為匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這裡將要學習一個新的顯示方法slideUp方法

最簡單的使用：不帶參數

$("elem").slideUp();

這個使用的含義就是：找到元素的高度，然後採用一個下滑動畫讓元素一直滑到隱藏，當高度為0的時候，也就是不可見的時，修改元素display 樣式屬性被設定為none。這樣就能確保這個元素不會影響頁面配置了

帶參數：

.slideUp( [duration ] [, easing ] [, complete ] ) 

同樣可以提供一個時間，然後可以使用一種過渡使用哪種easing 函式，jQuery預設就2種，可以通過下載外掛程式支援。最後一個動畫結束的回調方法。

因為動畫是非同步，所以要在動畫之後執行某些操作就必須要寫到回呼函數裡面，這裡要特別注意

3jQuery中上卷下拉切換slideToggle

slideDown與slideUp是一對相反的方法。需要對元素進行上下拉卷效果的切換，jQuery提供了一個便捷方法slideToggle用滑動動畫顯示或隱藏一個匹配元素

基本的操作：slideToggle();

這是最基本的操作，擷取元素的高度，使這個元素的高度發生改變，從而讓元素裡的內容往下或往上滑。

提供參數：.slideToggle( [duration ] ,[ complete ] )

同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會完成動畫，然後出發回呼函數

同時也提供了時間的快速定義，字串 ‘fast‘ 和 ‘slow‘ 分別代表200和600毫秒的延時

slideToggle("fast") slideToggle("slow") 

注意：

• display屬性值儲存在jQuery的資料緩衝中，所以display可以方便以後可以恢複到其初始值
• 當一個隱藏動畫後，高度值達到0的時候，display 樣式屬性被設定為none，以確保該元素不再影響頁面配置

上卷下拉效果 （jQuery）