饑人谷學(xué)習(xí)進(jìn)階第 21 天

動(dòng)畫基礎(chǔ)

動(dòng)畫是異步過程，動(dòng)畫會(huì)被放入動(dòng)畫隊(duì)列

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

用于隱藏元素，沒有參數(shù)的時(shí)候等同于直接設(shè)置display屬性

第二個(gè)參數(shù)為緩動(dòng)函數(shù)（均勻變化？先快后慢？先慢后快）
第三個(gè)參數(shù)為回調(diào)函數(shù)，動(dòng)畫效果完成之后再去do something

$('.test').hide()
// 等同于$('.test').css('display', 'none')

$('#book').hide(300, function(){
    alert('Animation complete.')
})
$('#book').hide(300, 'linear', function(){
    alert('Animation complete.')
})

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

用于顯示元素，用法和hide相似

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

事件處理套件也有一個(gè)名為.toggle()方法。哪個(gè)被調(diào)用取決于傳遞的參數(shù)的設(shè)置

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

漸變

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

通過淡入的方式顯示匹配元素，參數(shù)名義上和上面相同

$('#book').fadeIn('slow', function() {
    //Animation complete
})

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

通過淡出的方式隱藏匹配元素

$('#book').fadeOut('slow', function() {
    //Animation complete
})

.fadeTo(duration,opacity[,easing][,complete])

調(diào)整匹配元素的透明度，方法通過匹配元素的不透明度做動(dòng)畫效果

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

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

通過匹配元素的不透明度動(dòng)畫，來顯示或隱藏它們，方法執(zhí)行匹配元素的不透明度動(dòng)畫。當(dāng)被可見元素調(diào)用時(shí)，元素不透明度一旦達(dá)到0，display樣式屬性設(shè)置為none，所以元素不影響頁面的布局。

$("button:first").click(function() {
  $("p:first").fadeToggle("slow", "linear")
})

滑動(dòng)

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

用滑動(dòng)動(dòng)畫顯示一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫，這會(huì)導(dǎo)致頁面的下面部分滑下去，彌補(bǔ)了顯示的方式

$('#book').slideDown('slow', function() {
    // Animation complete.
});

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

用滑動(dòng)動(dòng)畫隱藏一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫，這會(huì)導(dǎo)致頁面的下面部分滑上去，當(dāng)一個(gè)隱藏動(dòng)畫后，高度值達(dá)到0的時(shí)候，display樣式屬性被設(shè)置為none，以確保該元素不再影響頁面布局。

$('#book').slideUp('slow', function() {
    // Animation complete.
});

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

用滑動(dòng)動(dòng)畫顯示或隱藏一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫，這會(huì)導(dǎo)致頁面中，在這個(gè)元素下面的內(nèi)容往下或往上滑。display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復(fù)到初始值。

如果一個(gè)元素的display屬性值為inline，然后是隱藏和顯示，這個(gè)元素將再次顯示inline。當(dāng)一個(gè)隱藏動(dòng)畫后，高度值達(dá)到0的時(shí)候，display樣式屬性被設(shè)置為none，以確保該元素不再影響頁面布局。

$('#clickme').click(function() {
 $('#book').slideToggle('slow', function() {
 // Animation complete.
 });
});

動(dòng)畫隊(duì)列

連續(xù)動(dòng)畫會(huì)按順序加入動(dòng)畫隊(duì)列，先進(jìn)先出按順序執(zhí)行

$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('動(dòng)畫執(zhí)行完畢')
           })
         })
       })
     })
   })
})
//等價(jià)于
$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
      console.log('真的完畢了')
    })

自定義動(dòng)畫

簡單固定動(dòng)畫不能滿足需求的時(shí)候，可以使用jQuery提供的自定義動(dòng)畫行為方法

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

第一個(gè)參數(shù)properties是CSS屬性和值的對象，動(dòng)畫將根據(jù)這組對象移動(dòng)。

需要注意的是：

1. 動(dòng)畫為漸變過程，所以設(shè)置的CSS屬性和值對象應(yīng)為可漸變的才能漸變（如：透明度，位置和寬高等），如果不是可漸變的（如：display、背景色（需要插件）等）。
2. 動(dòng)畫效果遵循CSS原則（如：只有絕對定位才能通過left設(shè)置位置移動(dòng)）
3. .animate()也是將動(dòng)畫放入動(dòng)畫隊(duì)列一個(gè)個(gè)去執(zhí)行

$('#auto').click(function(){
      $('.box').animate({
        left: '100px'
      }, 1000)
      $('.box').animate({
        left: '100px',
        top: '100px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '100px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '0'
      }, 1000)
    })
// 當(dāng)然可以分別將下一個(gè)動(dòng)畫寫入前一個(gè)動(dòng)畫的回調(diào)函數(shù)如動(dòng)畫隊(duì)列的代碼示例一樣
// 也可以下面這樣
$('#auto').click(function(){
      $('.box').animate({
        left: '100px'
      }, 1000)
      .animate({
        left: '100px',
        top: '100px'
      }, 1000)
      .animate({
        left: '0',
        top: '100px'
      }, 1000)
      .animate({
        left: '0',
        top: '0'
      }, 1000)
    })

.clearQueue

清楚動(dòng)畫隊(duì)列中未執(zhí)行的動(dòng)畫

.finish

停止當(dāng)前動(dòng)畫，并清除動(dòng)畫隊(duì)列中所有未完成的動(dòng)畫，最終展示動(dòng)畫隊(duì)列最后一幀的最終狀態(tài)

.stop([clearQueue][,jumpToEnd])

停止當(dāng)前正在執(zhí)行的動(dòng)畫
clearQueue(default:false)
jumpToEnd(default:false)

    $('#btn4').click(function(){
      $('.box').animate({
        left: '100px'
      }, 1000)
      $('.box').animate({
        left: '100px',
        top: '100px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '100px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '0'
      }, 1000)
    })
    $('#btn6').click(function(){
      // 停止當(dāng)前動(dòng)畫
      // 如果動(dòng)畫隊(duì)列后續(xù)還有動(dòng)畫直接從當(dāng)前動(dòng)畫執(zhí)行到的位置執(zhí)行動(dòng)畫隊(duì)列下一個(gè)動(dòng)畫
      $('.box').stop()
    })
    $('#btn7').click(function(){
      // 停止當(dāng)前動(dòng)畫，并清除未執(zhí)行的動(dòng)畫隊(duì)列
      // 停在當(dāng)前動(dòng)畫執(zhí)行到的位置
      $('.box').stop(true, false)
    })
    $('#btn8').click(function(){
      // 停止當(dāng)前動(dòng)畫，并清除未執(zhí)行的動(dòng)畫隊(duì)列，并且當(dāng)前動(dòng)畫展示最終狀態(tài)
      $('.box').stop(true, true)
    })
    $('#btn9').click(function(){
      // 停止當(dāng)前動(dòng)畫，并清除未執(zhí)行的動(dòng)畫隊(duì)列，并且當(dāng)前動(dòng)畫展示動(dòng)畫隊(duì)列最后一幀最終狀態(tài)
      $('.box').finish()
    })

當(dāng)用戶點(diǎn)擊一些按鈕需要跳過冗余的動(dòng)畫隊(duì)列中的動(dòng)畫時(shí)應(yīng)用上面的針對動(dòng)畫隊(duì)列的操作。
詳細(xì)方法圖解可參考：
jQuery 動(dòng)畫效果 與 動(dòng)畫隊(duì)列：自定義動(dòng)畫