基礎(chǔ)

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

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

看幾個例子

 $('.target').hide();

//等同于 $('.target').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 ] )

事件處理套件也有一個名為.toggle()方法。哪一個被調(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)整匹配元素的透明度，方法通過匹配元素的不透明度做動畫效果

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

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

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

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

滑動

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

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

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

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

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

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

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

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

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

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

<iframe src="http://js.jirengu.com/sogiy/embed" class="" id="" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; margin: 1em 0px; border: 1px solid rgb(170, 170, 170); width: 770px; min-height: 300px; height: 474px;"></iframe>

動畫隊列

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

自定義動畫

上面幾個簡單的動畫不能滿足需求的時候，jquery提供了自定義動畫行為的方法

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

官方文檔

properties是一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動。

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

.clearQueue

清除動畫隊列中未執(zhí)行的動畫

.finish

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

.stop( [clearQueue ] [, jumpToEnd ] )

停止當(dāng)前正在運(yùn)行的動畫

• clearQueue(default: false)
• jumpToEnd(default: false)