jQuery 動畫效果 與 動畫佇列

evenyao發表於2018-08-14
jQuery動畫佇列

基礎效果

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

用於隱藏元素，沒有引數的時候等同於直接設定 display 屬性

$(`.target`).hide()
//等同於
$(`.target`).css(`display`, `none`)

 

.show()

用於顯示元素，用法和hide類似

$(`#btn-box1`).on(`click`,function(){
  $(`.box`).show(`normal`)
})

 

.toggle()

用來切換元素的隱藏、顯示，類似於toggleClass，用法和show、hide類似

漸變效果

.fadeIn()

以淡入的方式顯示匹配元素

$(`#btn-box3`).on(`click`,function(){
  $(`.box`).fadeIn()
})

 

.fadeOut()

以淡出的方式顯示匹配元素

$(`#btn-box4`).on(`click`,function(){
  $(`.box`).fadeOut()
})

 

.fadeTo()

調整匹配元素的透明度，方法通過匹配元素的不透明度做動畫效果

$(`#book`).fadeTo(`slow`, 0.5, function() {
  // Animation complete.
});

 

滑動效果

.slideDown() / .slideUp()

用滑動動畫顯示一個匹配元素

$(`#btn-box5`).on(`click`,function(){
  $(`.box`).slideDown()
})

$(`#btn-box6`).on(`click`,function(){
  $(`.box`).slideUp()
})

 

回撥同步 與 非同步

如以下案例

回撥同步

即在整個動畫結束之後，出現`hide`，即為同步

$(`#btn-box1`).on(`click`,function(){
  $(`.box`).hide(`normal`, funciton(){
        console.log(`hide`)
  })
})

非同步

即只要事件觸發瞬間（即按下btn），就出現`hide`，即為非同步

$(`#btn-box1`).on(`click`,function(){
  $(`.box`).hide(`normal`)
   console.log(`hide`)
})

具體參考 demo 案例 1 中的案例

$(`#action1`).on(`click`,function(){
  var $box = $(`.box`)

  //回撥地獄寫法
  $box.hide(1000, function(){
    $box.show(1000, function(){
      $box.fadeOut(`slow`, function(){
        $box.fadeIn(`slow`, function(){
          $box.slideUp(function(){
            $box.slideDown(function(){
              console.log(`動畫執行完畢`)
              $(`#wrap1`).text(`動畫執行完畢`)
            })
          })
        })
      })
    })
  })
})

$(`#action2`).on(`click`,function(){
  var $box = $(`.box`)

  //使用jQuery動畫佇列寫法
  $box.hide(1000)
      .show(1000)
      .fadeOut(`slow`)
      .fadeIn(`slow`)
      .slideUp()
      .slideDown(function(){
        console.log(`真的執行完畢了`)
        $(`#wrap2`).text(`真的執行完畢了`)  //最後執行同步回撥
      })
    console.log(`動畫完畢了嗎？`)  //動畫才剛開始，在動畫佇列建立的時候，就輸出這句話，非同步
    $(`#wrap2`).text(`動畫完畢了嗎？`)
})
 

 

jQuery 動畫佇列

動畫佇列可以說是動畫執行的一個順序機制，當我們對一個物件新增多次動畫效果時後，新增的動作就會被放入這個動畫佇列中，等前面的動畫完成後再開始執行。

 

 

動畫佇列機制和執行順序

  1. 對於一組元素上的動畫效果，有如下兩種情況：
  • 當在一個animate()方法中應用多個屬性時，動畫是同時發生的。
  • 當以鏈式的寫法應用動畫方法時，動畫是按照順序發生的。
  1. 對於多組元素上的動畫效果，有如下情況：
  • 預設情況下，動畫都是同時發生的。
  • 當以回撥的形式應用動畫方式時，動畫是按照回撥順序發生的。

即參考之前的 回撥同步、非同步。

以上是整個動畫的排程一個流程，其實都是利用佇列非同步的空閒然後執行同步的程式碼，這樣在處理上是沒有浪費資源的，而且精確度也是最高的。

自定義動畫

當基礎效果、漸變效果、滑動效果動畫不能滿足需求的時候，jQuery 提供了自定義動畫行為的方法

.animate( properties [, duration ] [, easing ] [, complete ] )

properties是一個 CSS屬性和值 的物件，動畫將根據這組物件移動。

$(`#btn4`).click(function(){
  $(`.box`).animate({
    left: `150px`
  },1000)
  .animate({
    left: `150px`,
    top: `150px`
  },1000)
  .animate({
    left: `0`,
    top: `150px`
  },1000)
  .animate({
    left: `0`,
    top: `0`
  },1000)
})

 

.clearQueue()

清除 動畫佇列 中未執行的動畫

 

.stop( [clearQueue ] [, jumpToEnd ] )

停止當前正在執行的動畫
裡面的引數

  • clearQueue：即是.clearQueue()方法，決定是否清楚 動畫佇列 中未執行的動畫
  • jumpToEnd：即是決定是否展示當前一幀動畫是否執行到最後

這兩個引數預設都為false
即.stop()等同於.stop(false,false)

.stop(false,false)

動畫序列中共有 4 個序列，當執行到 動畫序列2 的時候 使用.stop()，序列2 立即停止，並執行 動畫序列3 ，執行完之後，執行動畫序列4。

 

進入 demo 點選 auto 之後，再點選 .stop() 即可檢視效果

 

.stop(true,false)

動畫序列中共有 4 個序列，當執行到 動畫序列2 的時候 使用.stop(true,false)，序列2 立即停止，由於引數 [clearQueue]是 true 因此後面的也動畫序列也全部清空，不會再往下執行動畫序列。因此動畫會停留在 動畫序列2 .stop(true,false)的地方。

 

進入 demo 點選 auto 之後，再點選 .stop(true,false) 即可檢視效果

 

.stop(true,true)

動畫序列中共有 4 個序列，當執行到 動畫序列2 的時候 使用.stop(true,true)，由於引數 [clearQueue]是 true 因此後面的也動畫序列也全部清空，不會再往下執行動畫序列。由於引數 [jumpToEnd]也是 true ，因此 最後會停留在 動畫序列2 本身應該結束的位置。

 

進入 demo 點選 auto 之後，再點選 .stop(true,true) 即可檢視效果

 

.finish()

停止當前動畫，並清除 動畫佇列 中所有未完成的動畫，最終展示 動畫佇列 最後一幀的最終狀態

 

進入 demo 點選 auto 之後，再點選 .finish() 即可檢視效果

 

相關案例

之前提到的 基礎效果、漸變效果、滑動效果、回撥同步與非同步、動畫佇列都包含在以下 demo 案例中
demo 案例 1

自定義動畫 / 動畫佇列說明 包含在以下 demo 案例中
demo 案例 2

參考

jQuery API
jQuery 動畫佇列
深入學習 jQuery 動畫佇列

相關文章