jQuery 動畫效果與動畫隊列_ZenDei技術網路在線

jQuery 動畫效果與動畫隊列

-Advertisement-

基礎效果 .hide([duration ] [,easing ] [,complete ]) 用於隱藏元素，沒有參數的時候等同於直接設置 display 屬性 .show() 用於顯示元素，用法和hide類似 .toggle() 用來切換元素的隱藏、顯示，類似於toggleClass，用法和sho ...

基礎效果

.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 動畫隊列

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

動畫隊列機制和執行順序

對於一組元素上的動畫效果，有如下兩種情況：

當在一個animate()方法中應用多個屬性時，動畫是同時發生的。
當以鏈式的寫法應用動畫方法時，動畫是按照順序發生的。

對於多組元素上的動畫效果，有如下情況：

預設情況下，動畫都是同時發生的。
當以回調的形式應用動畫方式時，動畫是按照回調順序發生的。

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

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

自定義動畫

當基礎效果、漸變效果、滑動效果動畫不能滿足需求的時候，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() 即可查看效果

參考

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

您的分享是我們最大的動力!