前言

jQuery的動(dòng)畫(huà)系統(tǒng)做的非常出色，而且把最常用的顯示寿酌、隱藏胰苏、淡入淡出、滑動(dòng)顯示和折疊凳效果都做了很好的封裝醇疼。跟jQuery的選擇器和事件配合起來(lái)硕并，可以實(shí)現(xiàn)很多很絢的效果法焰，而且簡(jiǎn)單易用兼容性好。

1. 顯示動(dòng)畫(huà)

jQuery的原型上的方法 show()方法可以實(shí)現(xiàn)讓DOM元素進(jìn)行顯示動(dòng)畫(huà)倔毙。

• 語(yǔ)法： show([speed,[easing],[fn]])

• 參數(shù)

  • speed:三種預(yù)定速度之一的字符串("slow","normal", or "fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)
  • fn:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)埃仪，每個(gè)元素執(zhí)行一次。
  • easing:(Optional) 用來(lái)指定切換效果陕赃，默認(rèn)是"swing"卵蛉，可用參數(shù)"linear".可以可以進(jìn)行擴(kuò)展，比如參考文章：地址

• 返回值： jQuery包裝對(duì)象么库。

• 示例

// 顯示所有段落
// <p style="display: none">Hello</p>
$("p").show()

// 用緩慢的動(dòng)畫(huà)將隱藏的段落顯示出來(lái)毙玻，歷時(shí)600毫秒。
// <p style="display: none">Hello</p>
$("p").show("slow");

// 用迅速的動(dòng)畫(huà)將隱藏的段落顯示出來(lái)廊散，歷時(shí)200毫秒桑滩。并在之后執(zhí)行反饋！
// <p style="display: none">Hello</p>
$("p").show("fast",function(){
   $(this).text("Animation Done!");
 });

// 將隱藏的段落用將近4秒的時(shí)間顯示出來(lái)允睹。运准。。并在之后執(zhí)行一個(gè)反饋缭受。胁澳。。
// <p style="display: none">Hello</p>
$("p").show(4000,function(){
   $(this).text("Animation Done...");
 });

2. 隱藏動(dòng)畫(huà)

語(yǔ)法： hide([speed,[easing],[fn]])

隱藏動(dòng)畫(huà)的參數(shù)和使用跟show表現(xiàn)一致米者。在此就不贅述韭畸。

$("p").hide()
// 用600毫秒的時(shí)間將段落緩慢的隱藏
$("p").hide("slow");
// 用200毫秒將段落迅速隱藏，之后彈出一個(gè)對(duì)話框蔓搞。
$("p").hide("fast",function(){
   alert("Animation Done.");
 });

3. 下滑顯示（slideDown)

語(yǔ)法：slideUp([speed,[easing],[fn]])

通過(guò)高度變化（向上減幸榷　）來(lái)動(dòng)態(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)喂分。這個(gè)動(dòng)畫(huà)效果只調(diào)整元素的高度锦庸，可以使匹配的元素以“滑動(dòng)”的方式隱藏起來(lái)。在jQuery 1.3中蒲祈，上下的padding和margin也會(huì)有動(dòng)畫(huà)甘萧，效果更流暢。

參數(shù)跟show保持一致梆掸，不再贅述扬卷。

// 用600毫秒緩慢的將段落滑上
$("p").slideUp("slow");
// 用200毫秒快速將段落滑上，之后彈出一個(gè)對(duì)話框
$("p").slideUp("fast",function(){
   alert("Animation Done.");
 });

4. 折疊隱藏效果（slideUp)

語(yǔ)法： slideUp([speed,[easing],[fn]])

通過(guò)高度變化（向上減兴崆铡）來(lái)動(dòng)態(tài)地隱藏所有匹配的元素怪得，在隱藏完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。

跟slideDown的語(yǔ)法保持一致。參數(shù)等不再贅述汇恤。

$("p").slideUp("slow");
// 用200毫秒快速將段落滑上庞钢，之后彈出一個(gè)對(duì)話框
$("p").slideUp("fast",function(){
   alert("Animation Done.");
 });

5. 折疊和下拉效果切換方法（toggleSlide)

語(yǔ)法：slideToggle([speed],[easing],[fn])

用法跟slideUp和slideDown保持一致。如果元素已經(jīng)滑上去了因谎，那么執(zhí)行此方法就會(huì)滑下來(lái)基括。

6. 淡入、淡出效果

由于淡入淡出的方法跟slide系列的方法保持一致财岔。不贅述风皿。

7、設(shè)置元素透明度動(dòng)畫(huà)

• 語(yǔ)法：fadeTo([[speed],opacity,[easing],[fn]])

• 概述

把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度匠璧，并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)桐款。這個(gè)動(dòng)畫(huà)只調(diào)整元素的不透明度，也就是說(shuō)所有匹配的元素的高度和寬度不會(huì)發(fā)生變化夷恍。

• 參數(shù)

  • speed:三種預(yù)定速度之一的字符串("slow","normal", or "fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)
  • opacity:一個(gè)0至1之間表示透明度的數(shù)字魔眨。0完全透明，1完全不透明酿雪。
  • easing:(Optional) 用來(lái)指定切換效果遏暴，默認(rèn)是"swing"，可用參數(shù)"linear"
  • fn:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)指黎，每個(gè)元素執(zhí)行一次朋凉。

• 示例

// 使用淡入效果來(lái)顯示一個(gè)隱藏的 <p> 元素：
$(".btn2").click(function(){
  $("p").fadeIn();
});
// 用600毫秒緩慢的將段落的透明度調(diào)整到0.66，大約2/3的可見(jiàn)度
$("p").fadeTo("slow", 0.66);
// 用200毫秒快速將段落的透明度調(diào)整到0.25醋安，大約1/4的可見(jiàn)度杂彭，之后彈出一個(gè)對(duì)話框
$("p").fadeTo("fast", 0.25, function(){
   alert("Animation Done.");
 });

8. 自定義動(dòng)畫(huà)

jQuery封裝了對(duì)css中數(shù)值屬性的動(dòng)畫(huà)效果的封裝，可以讓開(kāi)發(fā)人員對(duì)數(shù)值類的屬性進(jìn)行自定義的動(dòng)畫(huà)吓揪。

• 語(yǔ)法 animate(params,[speed],[easing],[fn])

• 參數(shù)

  • params:一組包含作為動(dòng)畫(huà)屬性和終值的樣式屬性和及其值的集合
  • speed:三種預(yù)定速度之一的字符串("slow","normal", or "fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)
  • easing:要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing".
  • fn:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)亲怠，每個(gè)元素執(zhí)行一次。

• 示例

// 在一個(gè)動(dòng)畫(huà)中同時(shí)應(yīng)用三種類型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

// 讓指定元素左右移動(dòng)
// HTML 代碼:
// <button id="left">?</button> <button id="right">?</button>
// <div class="block"></div>
// jQuery 代碼:
$("#right").click(function(){
  $(".block").animate({left: '+=50px'}, "slow");
});

$("#left").click(function(){
  $(".block").animate({left: '-=50px'}, "slow");
});

// 在600毫秒內(nèi)
$("p").animate({
   height: '300px', opacity: '0.2'
 }, "slow");

滾動(dòng)到頂部案例

    $('#btnScrollTop').on('click', function(e) {
        $('html,body').animate({
          scrollTop: 0
        }, 1000);
      });

9. 停止動(dòng)畫(huà)

語(yǔ)法：stop([queue],[clearQueue],[jumpToEnd])

停止所有在指定元素上正在運(yùn)行的動(dòng)畫(huà)磺芭。如果隊(duì)列中有等待執(zhí)行的動(dòng)畫(huà)(并且clearQueue沒(méi)有設(shè)為true)赁炎，他們將被馬上執(zhí)行

參數(shù):

• clearQueue:如果設(shè)置成true，則清空隊(duì)列钾腺。可以立即結(jié)束動(dòng)畫(huà)讥裤。

• jumpToEnd:讓當(dāng)前正在執(zhí)行的動(dòng)畫(huà)立即完成放棒，并且重設(shè)show和hide的原始樣式，調(diào)用回調(diào)函數(shù)等己英。

• queue:用來(lái)停止動(dòng)畫(huà)的隊(duì)列名稱(v1.7+ 以后版本才添加)

• 示例

// 停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)：
$("#stop").click(function(){
  $("#box").stop();
  // 立即結(jié)束當(dāng)前動(dòng)畫(huà)间螟，并清空隊(duì)列。
  $("#box").stop(true, true);
});
// 點(diǎn)擊Go之后開(kāi)始動(dòng)畫(huà),點(diǎn)Stop之后會(huì)在當(dāng)前位置停下來(lái)
// <button id="go">Go</button> <button id="stop">STOP!</button>
// <div class="block"></div><button id="go">Go</button> <button id="stop">STOP!</button>
// <div class="block"></div>
// 開(kāi)始動(dòng)畫(huà)
$("#go").click(function(){
  $(".block").animate({left: '+200px'}, 5000);
});

// 當(dāng)點(diǎn)擊按鈕后停止動(dòng)畫(huà)
$("#stop").click(function(){
  $(".block").stop();
});

10. 結(jié)束動(dòng)畫(huà)

• 語(yǔ)法：finish( [queue ] )

• 概述

停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)，刪除所有排隊(duì)的動(dòng)畫(huà)厢破，并完成匹配元素所有的動(dòng)畫(huà)荣瑟。當(dāng).finish()在一個(gè)元素上被調(diào)用，立即停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)和所有排隊(duì)的動(dòng)畫(huà)（如果有的話）摩泪，并且他們的CSS屬性設(shè)置為它們的目標(biāo)值（所有動(dòng)畫(huà)的目標(biāo)值）笆焰。所有排隊(duì)的動(dòng)畫(huà)將被刪除。如果第一個(gè)參數(shù)提供见坑，該字符串表示的隊(duì)列中的動(dòng)畫(huà)將被停止嚷掠。

.finish()方法和.stop(true, true)很相似，.stop(true, true)將清除隊(duì)列荞驴，并且目前的動(dòng)畫(huà)跳轉(zhuǎn)到其最終值不皆。但是，不同的是熊楼，.finish() 會(huì)導(dǎo)致所有排隊(duì)的動(dòng)畫(huà)的CSS屬性跳轉(zhuǎn)到他們的最終值霹娄。

• 參數(shù)queue：String類型，停止動(dòng)畫(huà)隊(duì)列中的名稱鲫骗。

• 示例

// 停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)
$("#complete").click(function(){
  $("div").finish();
});

上課代碼

<input type="button" value="動(dòng)畫(huà)" id="btn">
  <input type="button" value="立即結(jié)束動(dòng)畫(huà)" id="btnFinish">
  <input type="button" value="停止動(dòng)畫(huà)" id="btnStop">
  <div class="box">
  </div>
  <script>
    $(function() {
      $('#btn').on('click', function(e) {
        $('.box').hide(1000)
        .show(1000)
        .slideUp(1000)
        .slideDown(1000)
        .fadeTo(1000, 0.5)
        .animate({width: 200}, 1000);
      });

      $('#btnFinish').on('click', function(e) {
        // 立即結(jié)束動(dòng)畫(huà),讓dom元素變化到最終動(dòng)畫(huà)隊(duì)列都結(jié)束效果狀態(tài)项棠。
        $('.box').finish();
      });

      $('#btnStop').on('click', function(e) {
        // stop方法傳入一個(gè)參數(shù)：false或者不傳參數(shù)，表示結(jié)束當(dāng)前的動(dòng)畫(huà)挎峦。后續(xù)的動(dòng)畫(huà)不受影響
        // $('.box').stop(false);
        // 如果傳入第一個(gè)參數(shù)為true香追，后續(xù)的動(dòng)畫(huà)也都受影響。不執(zhí)行了坦胶。
        // $('.box').stop(true);

        // 讓dom元素動(dòng)畫(huà)結(jié)束透典，然后讓dom元素到當(dāng)前動(dòng)畫(huà)結(jié)果的狀態(tài)。
        $('.box').stop(true, true);
      });
    });
  </script>

11. 延遲執(zhí)行

• 語(yǔ)法：delay(duration,[queueName])

• 概述

設(shè)置一個(gè)延時(shí)來(lái)推遲執(zhí)行隊(duì)列中之后的項(xiàng)目顿苇。用于將隊(duì)列中的函數(shù)延時(shí)執(zhí)行峭咒。他既可以推遲動(dòng)畫(huà)隊(duì)列的執(zhí)行，也可以用于自定義隊(duì)列纪岁。

• 參數(shù)

  • duration:延時(shí)時(shí)間凑队，單位：毫秒
  • queueName:隊(duì)列名詞，默認(rèn)是Fx幔翰，動(dòng)畫(huà)隊(duì)列漩氨。

• 示例

// 在.slideUp() 和 .fadeIn()之間延時(shí)800毫秒。
// <div id="foo /">
$('#foo').slideUp(300).delay(800).fadeIn(400);

12. jQuery動(dòng)畫(huà)屬性設(shè)置

• 關(guān)閉頁(yè)面上所有的動(dòng)畫(huà)

  jQuery.fx.off 把這個(gè)屬性設(shè)置為true可以立即關(guān)閉所有動(dòng)畫(huà)(所有效果會(huì)立即執(zhí)行完畢)

• 設(shè)置動(dòng)畫(huà)的顯示幀速

  jQuery.fx.interval = 100;

對(duì)應(yīng)視頻地址：http://qtxh.ke.qq.com
老馬qq： 515154084
老馬微信：請(qǐng)掃碼

微信：Flydragon_malun