• show()、hide()、toggle()
• 參數(shù)：null或(duration,easing,callblack)
• fadeIn()、fadeout()、fadeToggle()、fadeTo()
• 參數(shù)：null或(duration,[opacity],easing,callblack)
• slideDown(),slideUp(),slideToggle()
• 參數(shù)：null或(duration,easing,callblack)
• animate()
• 參數(shù)：(target,duration,easing,callback)
• stop()、finish()
• 參數(shù)：true,false
• delay()
• 參數(shù)：(duration)
• jQuery.fx.off?true

?一、展示、隱藏、切換

?1.show()和hide()方法實(shí)現(xiàn)的主要原理就是操作DOM的display樣式值（block,none）;很簡(jiǎn)單的應(yīng)用，直接上代碼：

//html <div class="demo"><p>user:小明</p><ul><li>全部訂單</li><li>個(gè)人錢包</li><li>個(gè)人資料</li><li>退出</li></ul> </div>//css .demo{width: 150px;border: 1px solid red; } ul{display: none; }//js $("p").on("mouseenter",function(){$(this).next().show(1500); }); $(".demo").on("mouseleave",function(){$("p").next().hide(1000); });

2.在示例中，應(yīng)用了漸變式的顯示和隱藏，操作方式就是給show()和hide()方法傳入指定的漸變時(shí)間。漸變時(shí)間本質(zhì)上就是在指定的時(shí)間內(nèi)將DOM的寬、高、透明度、內(nèi)邊距、外邊距從零到指定的值。下面是通過控制臺(tái)監(jiān)控到的漸變過程的截圖：

3.show()和hide()方法還有兩個(gè)參數(shù)：easing，callback

• easing:控制漸變速度==>"swing" - 在開頭/結(jié)尾移動(dòng)慢，在中間移動(dòng)快;"linear" - 勻速移動(dòng)
• callback：回調(diào)函數(shù)，在事件程序執(zhí)行完以后執(zhí)行

4.toggle()這個(gè)方法在1.9版本就被移除了，拿出來說是因?yàn)檫@種交互設(shè)計(jì)在一定情況下比較符合人的行為邏輯，值得學(xué)習(xí)一下，我就直接搬運(yùn)手冊(cè)的示例展示一下：（第一次點(diǎn)擊字體顏色變紅，第二次點(diǎn)擊字體顏色變藍(lán)，第三次字體顏色變綠，再點(diǎn)擊又變紅，以此類推。）

//html <p>我的臉</p> //js $("p").toggle(function(){$("p").css({"color":"red"});},function(){$("p").css({"color":"blue"});},function(){$("p").css({"color":"green"}); });

?二、淡入淡出與卷入卷出

?在開頭的列表中已經(jīng)列出了接口的使用語(yǔ)法，這兩個(gè)系列的方法可以說是簡(jiǎn)化版的展示隱藏，其參數(shù)使用基本一致，所以只做文字說明，不提供示例代碼。

• fadeIn()、fadeout()、fadeToggle()、fadeTo()

• 參數(shù)：null或(duration,[opacity],easing,callblack)

　　fade翻譯是褪色的意思，所以這一系列動(dòng)畫效果就是操作DOM的透明度，前面講到顯示和隱藏時(shí)我們了解到除了核心實(shí)現(xiàn)的是display的樣式外，會(huì)還有一系列的漸變過程。fade系列方法也一樣，核心實(shí)現(xiàn)是display的樣式，但是動(dòng)畫漸變效果只針對(duì)opacity樣式操作透明度。反過來說就是除了透明度以外的寬高邊距都是直接展示樣式的最大值，只有opacity的樣式實(shí)現(xiàn)漸變效果。而且fade系列動(dòng)畫還增加了一個(gè)參數(shù)：opacity可以指定透明度漸變到指定值。

　　fadeIn()實(shí)現(xiàn)淡入效果；fadeout()實(shí)現(xiàn)淡出效果；

　　fadeToggle()實(shí)現(xiàn)淡入淡出雙向效果，當(dāng)DOM是顯示狀態(tài)時(shí)觸發(fā)這個(gè)動(dòng)畫事件就會(huì)淡出，當(dāng)DOM是隱藏狀態(tài)時(shí)觸發(fā)這個(gè)動(dòng)畫事件就會(huì)淡入。

　　fadeTo()實(shí)現(xiàn)逐漸改變?cè)赝该鞫?#xff0c;這個(gè)動(dòng)畫效果不會(huì)修改display樣式，僅僅只對(duì)元素透進(jìn)行明度操作。

• slideDown(),slideUp(),slideToggle()

• 參數(shù)：null或(duration,easing,callblack)

　　slide翻譯是滑動(dòng)的意思，通常我們也把這類動(dòng)畫效果叫做用卷入卷出效果，其實(shí)現(xiàn)思想與fade系列動(dòng)畫完全一致，fade系列操作的是透明度，slide則是操作高度（height）來實(shí)現(xiàn)。參數(shù)和顯示隱藏方法完全一致。

　　sildeDown()實(shí)現(xiàn)卷入效果，從上到下將隱藏的元素展示出來。

　　sildeUp()實(shí)現(xiàn)卷出效果，從下到上將顯示的元素隱藏。

　　sildeToggle()實(shí)現(xiàn)雙向卷入卷出效果，與fadeToggle()的實(shí)現(xiàn)思想一致。

?三、玩轉(zhuǎn)jQuery動(dòng)畫之自定義動(dòng)畫——animate()

?聽說能用這個(gè)方法做各種復(fù)查的動(dòng)畫效果？

?是的。

?但是，我要告訴你的是，我不僅會(huì)在這篇博客來解析它的用法，還會(huì)在下一篇博客中針對(duì)它的底層實(shí)現(xiàn)原理進(jìn)行剖析，就是會(huì)寫模擬功能的源碼隊(duì)列及實(shí)現(xiàn)原理、基于隊(duì)列模擬實(shí)現(xiàn)animate()，激動(dòng)吧！

• (selector).animate({styles},speed,easing,callback)

• {styles}:運(yùn)動(dòng)的目標(biāo)位置
• speed:運(yùn)動(dòng)速度
• easing:速度變化規(guī)律
• callback:回調(diào)函數(shù)

?實(shí)際應(yīng)用animate()非常的簡(jiǎn)單，下面就實(shí)現(xiàn)一個(gè)簡(jiǎn)單的彈力效果：

//html <div class="demo" style="width: 100px; height:100px; background-color: red; position: absolute;"></div>//js $(".demo").animate({left:"+=100px",top:"+=150px"},1000,"swing",function(){$(this).animate({left:"+=50px",top:"-=100px"},800,"swing",function(){$(this).animate({left:"+=10px",top:"+=100px"},1000,"swing");}); });

偷偷告訴你這里挖坑了，嘻嘻。。。這個(gè)坑暫時(shí)還不能在這里解析，后面的博客會(huì)有一篇《回調(diào)地獄》來拉你出來。

?四、控制動(dòng)畫

在大多數(shù)情況下，動(dòng)畫都是由事件觸發(fā)，中途有暫停，直接運(yùn)動(dòng)到某個(gè)位置或者終點(diǎn)，甚至有需求是直接跳過動(dòng)畫，也有為了讓頁(yè)面運(yùn)行在設(shè)備配置較低的機(jī)器上，直接關(guān)閉動(dòng)畫效果的情況。這些需求就需要stop、finish、delay、jQuery.fx.off true來實(shí)現(xiàn)。

//html <div class="demo" style="width: 100px; height:100px; background-color: red; position: absolute; top: 50px;"></div> <button class="stopBtn">stop</button> <button class="finishBtn">finish</button> <button class="delayBtn">delay</button> <button class="animateBtn">animate</button>

• stop()：不寫參數(shù)時(shí)觸發(fā)stop函數(shù)執(zhí)行的效果是終止當(dāng)前動(dòng)畫執(zhí)行，如果DOM只有當(dāng)前動(dòng)畫或者是動(dòng)畫中的最后一個(gè)動(dòng)畫，就會(huì)停在當(dāng)前位置；如果是多個(gè)動(dòng)畫效果中途觸發(fā)stop函數(shù)，終止當(dāng)前動(dòng)畫效果，直接到達(dá)下一個(gè)動(dòng)畫起始點(diǎn)，并開始執(zhí)行下一個(gè)動(dòng)畫。

//單個(gè)動(dòng)畫效果--多個(gè)動(dòng)畫效果就不演示了
$(".animateBtn").on("click",function(){$(".demo").animate({left:"+=300px",top:"+=100px"},3000); }); $(".stopBtn").on("click",function(){$(".demo").stop(); });

• stop(true)、stop(true,true)：當(dāng)傳入一個(gè)參數(shù)true時(shí)，不管第幾個(gè)動(dòng)畫，只要觸發(fā)stop函數(shù)就會(huì)讓DOM停止在當(dāng)前位置，后面的所有動(dòng)畫都不會(huì)執(zhí)行。當(dāng)傳入兩個(gè)參數(shù)true,true時(shí)，則是取消當(dāng)前動(dòng)畫效果，并直接到達(dá)當(dāng)前動(dòng)畫的重點(diǎn)，且后面的動(dòng)畫不執(zhí)行。這兩個(gè)效果就不寫代碼了，大家自己測(cè)試，這里我想把前面挖的一個(gè)坑填一下。

當(dāng)我們使用show和hide實(shí)現(xiàn)顯示和隱藏時(shí)，假設(shè)我們連續(xù)多次觸發(fā)了，會(huì)出現(xiàn)多次回彈，直到所有觸發(fā)效果執(zhí)行完。這會(huì)嚴(yán)重影響體驗(yàn)，這里我們就可以使用stop來解決：

//這篇博客的第一個(gè)示例js代碼修改成下面代碼 $("p").on("mouseenter",function(){$(this).next().stop().show(1500,'swing');console.log(this); }); $(".demo").on("mouseleave",function(){$("p").next().stop().hide(1000,'linear'); });

• finish()：取消所有動(dòng)畫效果，將DOM由當(dāng)前位置呈直線效果直接移動(dòng)到最后的目標(biāo)位置（過程非常快）。

$(".animateBtn").on("click",function(){$(".demo").animate({left:"+=300px",top:"+=100px"},1000,"swing",function(){$(".demo").animate({left:"+=100px",top:"-=50px"},500,"swing",function(){$(".demo").animate({left:"+=30",top:"+=50px"},600,"swing");});}); }); $(".finishBtn").on("click",function(){$(".demo").finish(); });

• delay()：延遲動(dòng)畫執(zhí)行，可以理解為暫停動(dòng)畫。在動(dòng)畫的中間插入這個(gè)方法，并傳入延遲時(shí)間作為參數(shù)。

$(".animateBtn").on("click",function(){$(".demo").animate({left:"+=300px",top:"+=100px"},1000,"swing",function(){$(".demo").delay(3000)//這里延遲3秒.animate({left:"+=100px",top:"-=50px"},500,"swing",function(){$(".demo").animate({left:"+=30",top:"+=50px"},600,"swing");});}); });

• jQuery.fx.off=true；會(huì)取消所有動(dòng)畫效果，被觸發(fā)的動(dòng)畫直接從起始點(diǎn)到達(dá)動(dòng)畫的結(jié)束位置，中間不會(huì)有任何過渡效果，但是延遲效果依然會(huì)保留。

?五、jQuery動(dòng)畫插件：Easing Plugin

?目的：用于擴(kuò)展動(dòng)畫效果；

連接地址：http://plugins.jquery.com/jquery.easing/

使用可參考這位大佬的博客：http://www.cnblogs.com/interstellar/p/6562446.html

<script type="text/javascript" src="jquery-2.0.3.js"></script> <!--easing插件--> <script type="text/javascript" src="jquery.easing.1.3.min.js"></script> $(".animateBtn").on("click",function(){$(".demo").animate({left:"+=300px",top:"+=100px"},1000,"easeInOutBack",function(){$(".demo")//.delay(3000)//這里延遲3秒.animate({left:"+=100px",top:"-=50px"},500,"easeInElastic",function(){$(".demo").animate({left:"+=30",top:"+=50px"},600,"swing");});}); });

將插件引入后，easing參數(shù)就可以使用插件提供的效果了，之前的swing只是改變速率，有了插件還可以改變路徑。大家有興趣的話可以玩玩這個(gè)插件，學(xué)習(xí)學(xué)習(xí)咯。

?

轉(zhuǎn)載于:https://www.cnblogs.com/ZheOneAndOnly/p/10362908.html

總結(jié)

以上是生活随笔為你收集整理的jQuery使用（八）：运动方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。