前端基礎-jQuery的動畫效果

天王蓋地虎寶塔鎮河妖發表於2018-06-10
前端jQuery動畫

閱讀目錄

  1.  隱藏
  2.  顯示
  3.  切換
  4.  下拉
  5.  上卷
  6.  顯示

一、jQuery中隱藏元素的hide方法

讓頁面上的元素不可見，一般可以通過設定css的display為none屬性。但是通過css直接修改是靜態的佈局，如果在程式碼執行的時候，

一般是通過js控制元素的style屬性，這裡jQuery提供了一個快捷的方法.hide()來達到這個效果

$elem.hide()

提供引數：

.hide( options )

當提供hide方法一個引數時，.hide()就會成為一個動畫方法。.hide()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操作

快捷引數：

.hide("fast / slow")

這是一個動畫設定的快捷方式，`fast` 和 `slow` 分別代表200和600毫秒的延時，就是元素會執行200/600毫秒的動畫後再隱藏

注意：

jQuery在做hide操作的時候，是會儲存本身的元素的原始屬性值，再之後通過對應的方法還原的時候還是初始值。

比如一個元素的display屬性值為inline，那麼隱藏再顯示時，這個元素將再次顯示inline。

一旦透明度 達到0，display樣式屬性將被設定為none，這個元素將不再在頁面中影響佈局

二、jQuery中顯示元素的show方法

css中有display:none屬性，同時也有display:block，所以jQuery同樣提供了與hide相反的show方法

方法的使用幾乎與hide是一致的，hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示

看一段程式碼：使用上一致，結果相反

$(`elem`).hide(3000).show(3000)

讓元素執行3秒的隱藏動畫，然後執行3秒的顯示動畫。

show與hide方法是非常常用的，但是一般很少會基於這2個屬性執行動畫，大多情況下還是直接操作元素的顯示與隱藏為主

注意事項：

  • show與hide方法是修改的display屬性，通過是visibility屬性佈局需要通過css方法單獨設定
  • 如果使用!important在你的樣式中，比如display: none !important，如果你希望.show()方法正常工作，必須使用.css(`display`, `block !important`)重寫樣式
  • 如果讓show與hide成為一個動畫，那麼預設執行動畫會改變元素的高度，高度，透明度

三、jQuery中顯示與隱藏切換toggle方法

show與hide是一對互斥的方法。需要對元素進行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態，然後呼叫其對應的處理方法。

比如顯示的元素，那麼就要呼叫hide，反之亦然。 對於這樣的操作行為，jQuery提供了一個便捷方法toggle用於切換顯示或隱藏匹配元素

基本的操作：toggle();

這是最基本的操作，處理元素顯示或者隱藏，因為不帶引數，所以沒有動畫。通過改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒有動畫。

  • 如果元素是最初顯示，它會被隱藏
  • 如果隱藏的，它會顯示出來

display屬性將被儲存並且需要的時候可以恢復。如果一個元素的display值為inline，然後是隱藏和顯示，這個元素將再次顯示inline

提供引數：.toggle( [duration ] [, complete ] )

同樣的提供了時間、還有動畫結束的回撥。在引數對應的時間內，元素會發生顯示/隱藏的改變，在改變的過程中會把元素的高、寬、不透明度進行一系列動畫效果。

這個元素其實就是show與hide的方法

直接定位：.toggle(display)

直接提供一個引數，指定要改變的元素的最終效果

其實就是確定是使用show還是hide方法

if ( display === true ) {
  $( "elem" ).show();
} else if ( display === false ) {
  $( "elem" ).hide();
}

四、jQuery中下拉動畫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元素，如果多個元素一起做動畫效果，那麼要非常注意，
  • 回撥函式會在每一個元素執行完動畫後都執行一次，而不是這組 動畫整體才執行一次

五、jQuery中上捲動畫slideUp

對於顯示的元素，在將其隱藏的過程中，可以對其進行一些變化的動畫效果。之前學過了hide方法，hide方法在顯示的過程中也可以有動畫，

但 是.hide()方法將為匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這裡將要學習一個新的顯示方法slideUp方法

最簡單的使用：不帶引數

$("elem").slideUp();

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

這樣就能確保這個元素不會影響頁面佈局了

帶引數：

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

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

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

六、jQuery中上卷下拉切換slideToggle

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

基本的操作：slideToggle();

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

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

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

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

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

注意：

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

相關文章