上卷下拉效果 （jQuery）

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 ] ) 

一樣能夠提供一個時間，而後可使用一種過渡使用哪一種緩動函數，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，以確保該元素再也不影響頁面佈局