第四章：jQuery动画
一、動畫顯示與隱藏
1. jQuery中隱藏元素的hide方法
讓頁面上的元素不可見，一般可以通過設置css的display為none屬性。但是通過css直接修改是靜態(tài)的布局，如果在代碼執(zhí)行的時候，一般是通過js控制元素的style屬性，這里jQuery提供了一個快捷的方法.hide()來達到這個效果
$elem.hide()提供參數(shù)：
.hide( options )當提供hide方法一個參數(shù)時，.hide()就會成為一個動畫方法。.hide()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操作
快捷參數(shù)：
.hide("fast / slow")這是一個動畫設置的快捷方式，'fast' 和 'slow' 分別代表200和600毫秒的延時，就是元素會執(zhí)行200/600毫秒的動畫后再隱藏
注意：
jQuery在做hide操作的時候，是會保存本身的元素的原始屬性值，再之后通過對應的方法還原的時候還是初始值。比如一個元素的display屬性值為inline，那么隱藏再顯示時，這個元素將再次顯示inline。一旦透明度 達到0，display樣式屬性將被設置為none，這個元素將不再在頁面中影響布局
完整代碼:
<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>.left div,.right div {width: 100%;height: 50px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;}.left div {background: #bbffaa;}.right div {background: yellow;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body><h2>hide</h2><div class="left"><h4>測試一</h4><div id="a1">hide操作</div><button>直接hide</button><script type="text/javascript">//點擊buttom1 直接隱藏$("button:first").click(function() {$("#a1").hide()});</script><h4>測試一</h4><div id="a2">hide動畫操作</div><button>hide帶動畫</button><script type="text/javascript">//點擊buttom2 執(zhí)行動畫隱藏$("button:last").click(function() {$("#a2").hide({duration: 3000,complete: function() {alert('執(zhí)行3000ms動畫完畢')}})});</script></div> </body> </html>2. jQuery中顯示元素的show方法
css中有display:none屬性，同時也有display:block，所以jQuery同樣提供了與hide相反的show方法
方法的使用幾乎與hide是一致的，hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示
看一段代碼：使用上一致，結(jié)果相反
$('elem').hide(3000).show(3000)讓元素執(zhí)行3秒的隱藏動畫，然后執(zhí)行3秒的顯示動畫。
show與hide方法是非常常用的，但是一般很少會基于這2個屬性執(zhí)行動畫，大多情況下還是直接操作元素的顯示與隱藏為主
注意事項：
- show與hide方法是修改的display屬性，通過是visibility屬性布局需要通過css方法單獨設置
- 如果使用!important在你的樣式中，比如display: none !important，如果你希望.show()方法正常工作，必須使用.css('display', 'block !important')重寫樣式
- 如果讓show與hide成為一個動畫，那么默認執(zhí)行動畫會改變元素的高度，高度，透明度
3. jQuery中顯示與隱藏切換toggle方法
show與hide是一對互斥的方法。需要對元素進行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態(tài)，然后調(diào)用其對應的處理方法。比如顯示的元素，那么就要調(diào)用hide，反之亦然。 對于這樣的操作行為，jQuery提供了一個便捷方法toggle用于切換顯示或隱藏匹配元素
基本的操作：toggle();
這是最基本的操作，處理元素顯示或者隱藏，因為不帶參數(shù)，所以沒有動畫。通過改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒有動畫。
- 如果元素是最初顯示，它會被隱藏
- 如果隱藏的，它會顯示出來
display屬性將被儲存并且需要的時候可以恢復。如果一個元素的display值為inline，然后是隱藏和顯示，這個元素將再次顯示inline
提供參數(shù)：.toggle( [duration ] [, complete ] )
同樣的提供了時間、還有動畫結(jié)束的回調(diào)。在參數(shù)對應的時間內(nèi)，元素會發(fā)生顯示/隱藏的改變，在改變的過程中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法
直接定位：.toggle(display)
直接提供一個參數(shù)，指定要改變的元素的最終效果
其實就是確定是使用show還是hide方法
if ( display === true ) {$( "elem" ).show(); } else if ( display === false ) {$( "elem" ).hide(); }toggle方法就是show與hide的相互切換的一個快捷方法，具體使用可以參考右邊的案例：
完整代碼:
<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>div {width: 500px;height: 50px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;}.left {background: #bbffaa;}.right {background: yellow;display: none;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body><h2>通過toggle切換顯示與隱藏</h2><div class="left">顯示到隱藏</div><div class="right">隱藏到顯示</div><button>直接show-hide動畫</button><button>直接hide-show動畫</button><script type="text/javascript">$("button:first").click(function() {$(".left").toggle(3000)});</script><script type="text/javascript">$("button:last").click(function() {$(".right").toggle(3000)});</script> </body> </html>二、上卷下拉效果
1. jQuery中下拉動畫slideDown
對于隱藏的元素，在將其顯示出來的過程中，可以對其進行一些變化的動畫效果。之前學過了show方法，show方法在顯示的過程中也可以有動畫，但是.show()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這里將要學習一個新的顯示方法slideDown方法
.slideDown()：用滑動動畫顯示一個匹配元素
.slideDown()方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式
常見的操作，提供一個動畫是時間，然后傳遞一個回調(diào)，用于知道動畫是什么時候結(jié)束
.slideDown( [duration ] [, complete ] )持續(xù)時間(duration)是以毫秒為單位的，數(shù)值越大，動畫越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數(shù)被省略，那么默認使用400 毫秒的延時。
具體使用：
$("ele").slideDown(1000, function() {//等待動畫執(zhí)行1秒后,執(zhí)行別的動作.... });注意事項：
- 下拉動畫是從無到有，所以一開始元素是需要先隱藏起來的，可以設置display:none
- 如 果提供回調(diào)函數(shù)參數(shù)，callback會在動畫完成的時候調(diào)用。將不同的動畫串聯(lián)在一起按順序排列執(zhí)行是非常有用的。這個回調(diào)函數(shù)不設置任何參數(shù)，但是 this會設成將要執(zhí)行動畫的那個DOM元素，如果多個元素一起做動畫效果，那么要非常注意，回調(diào)函數(shù)會在每一個元素執(zhí)行完動畫后都執(zhí)行一次，而不是這組 動畫整體才執(zhí)行一次
2. jQuery中上卷動畫slideUp
對于顯示的元素，在將其隱藏的過程中，可以對其進行一些變化的動畫效果。之前學過了hide方法，hide方法在顯示的過程中也可以有動畫，但 是.hide()方法將為匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這里將要學習一個新的顯示方法slideUp方法
最簡單的使用：不帶參數(shù)
$("elem").slideUp();這個使用的含義就是：找到元素的高度，然后采用一個下滑動畫讓元素一直滑到隱藏，當高度為0的時候，也就是不可見的時，修改元素display 樣式屬性被設置為none。這樣就能確保這個元素不會影響頁面布局了
帶參數(shù)：
.slideUp( [duration ] [, easing ] [, complete ] )同樣可以提供一個時間，然后可以使用一種過渡使用哪種緩動函數(shù)，jQuery默認就2種，可以通過下載插件支持。最后一個動畫結(jié)束的回調(diào)方法。
因為動畫是異步的，所以要在動畫之后執(zhí)行某些操作就必須要寫到回調(diào)函數(shù)里面，這里要特別注意完整代碼:
<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>.left div,.right div {width: 100%;height: 50px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;}.left div {background: #bbffaa;}.right div {background: yellow;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body><h2>slideUp</h2><div class="left"><h4>測試一</h4><div id="a1"></div><button>點擊slideUp隱藏動畫</button></div><script type="text/javascript">//點擊button//執(zhí)行3秒隱藏//執(zhí)行3秒顯示$("button:first").click(function() {$("#a1").slideUp(3000)});</script><div class="right"><h4>測試二</h4><div id="a2"></div><button>點擊slideUp執(zhí)行回調(diào)</button></div><script type="text/javascript">//點擊button//執(zhí)行3秒隱藏//執(zhí)行3秒顯示$("button:last").click(function() {$("#a2").slideUp(3000,function(){alert('動畫執(zhí)行結(jié)束')})});</script> </body> </html>3. jQuery中上卷下拉切換slideToggle
slideDown與slideUp是一對相反的方法。需要對元素進行上下拉卷效果的切換，jQuery提供了一個便捷方法slideToggle用滑動動畫顯示或隱藏一個匹配元素
基本的操作：slideToggle();
這是最基本的操作，獲取元素的高度，使這個元素的高度發(fā)生改變，從而讓元素里的內(nèi)容往下或往上滑。
提供參數(shù)：.slideToggle( [duration ] ,[?complete ] )
同樣的提供了時間、還有動畫結(jié)束的回調(diào)。在參數(shù)對應的時間內(nèi)，元素會完成動畫，然后出發(fā)回調(diào)函數(shù)
同時也提供了時間的快速定義，字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時
slideToggle("fast") slideToggle("slow")注意：
- display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復到其初始值
- 當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局
三、淡入淡出效果
1. jQuery中淡出動畫fadeOut
讓元素在頁面不可見，常用的辦法就是通過設置樣式的display:none。除此之外還可以一些類似的辦法可以達到這個目的。這里要提一個透明度的方法，設置元素透明度為0，可以讓元素不可見，透明度的參數(shù)是0~1之間的值，通過改變這個值可以讓元素有一個透明度的效果。常見的淡入淡出動畫正是這樣的原理。
fadeOut()函數(shù)用于隱藏所有匹配的元素，并帶有淡出的過渡動畫效果
所謂"淡出"隱藏的，元素是隱藏狀態(tài)不對作任何改變，元素是可見的，則將其隱藏。
.fadeOut( [duration ], [ complete ] )通過不透明度的變化來實現(xiàn)所有匹配元素的淡出效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。這個動畫只調(diào)整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發(fā)生變化。
字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數(shù)被省略，那么默認使用400毫秒的延時
完整代碼: <!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>p{color:red;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body><h2>fadeOut</h2><p>測試文字淡入效果</p><p>慕課網(wǎng),專注分享</p>淡出的隱藏效果：<select id="animation"><option value="1">fadeOut( )</option><option value="2">fadeOut( "slow" )</option><option value="3">fadeOut( 3000 )</option><option value="4">fadeOut( 1000, complete )</option><option value="5">fadeOut( 1000, "linear" )</option><option value="6">fadeOut( options )</option></select></br></br><input id="btnFadeOut" type="button" value="點擊淡出隱藏" /><input id="btnShow" type="button" value="顯示" /><script type="text/javascript">//【顯示】按鈕$("#btnShow").click(function() {$("p").show();});//【隱藏】按鈕$("#btnFadeOut").click(function() {var v = $("#animation").val();if (v == "1") {$("p").fadeOut();} else if (v == "2") {$("p").fadeOut("slow");} else if (v == "3") {$("p").fadeOut(3000);} else if (v == "4") {$("p").fadeOut(2000, function() {alert("隱藏完畢!");});} else if (v == "5") {$("p").fadeOut(1000, "linear");} else if (v == "6") {$("p").fadeOut({duration: 1000});}});</script> </body> </html>2. jQuery中淡入動畫fadeIn
fadeOut是淡出效果，相反的還有淡入效果fadeIn,方法使用上兩者都是一致的，只是結(jié)果相反
.fadeIn( [duration ], [ complete ] )- duration：指定過渡動畫運行多長時間(毫秒數(shù))，默認值為400。該參數(shù)也可以為字符串"fast"(=200)或"slow"(=600)。
- 元素顯示完畢后需要執(zhí)行的函數(shù)。函數(shù)內(nèi)的this指向當前DOM元素。
fadeIn()函數(shù)用于顯示所有匹配的元素，并帶有淡入的過渡動畫效果。
注意：
- 淡入的動畫原理：操作元素的不透明度從0%逐漸增加到100%
- 如果元素本身是可見的，不對其作任何改變。如果元素是隱藏的，則使其可見
3. jQuery中淡入淡出切換fadeToggle
fadeToggle()函數(shù)用于切換所有匹配的元素，并帶有淡入/淡出的過渡動畫效果。之前也學過toggle、slideToggle 也是類似的處理方式
fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即如果元素當前是可見的，則將其隱藏(淡出)；如果元素當前是隱藏的，則使其顯示(淡入)。常用語法：.fadeToggle( [duration ] ,[?complete ] )
可選的?duration?參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。 可選的 callback 參數(shù)是 fadeToggle完成后所執(zhí)行的函數(shù)名稱。
fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
具體使用，請參考右邊代碼區(qū)域：
完整代碼：
<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>p {color: red;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body><h2>fadeToggle</h2><p>測試文字淡入淡出切換效果</p><p>慕課網(wǎng),專注分享</p>淡入淡出的隱藏效果：<select id="animation"><option value="1">fadeToggle( )</option><option value="2">fadeToggle( "slow" )</option><option value="3">fadeToggle( 3000 )</option><option value="4">fadeToggle( 1000, complete )</option><option value="5">fadeToggle( 1000, "linear" )</option><option value="6">fadeToggle( options )</option></select><input id="btnFadeSwitch" type="button" value="點擊切換顯示/隱藏"><script type="text/javascript">//【切換顯示/隱藏】按鈕$("#btnFadeSwitch").click(function() {var v = $("#animation").val();if (v == "1") {$("p").fadeToggle();} else if (v == "2") {$("p").fadeToggle("slow");} else if (v == "3") {$("p").fadeToggle(3000);} else if (v == "4") {$("p").fadeToggle(1000, function() {alert("切換完畢!");});} else if (v == "5") {$("p").fadeToggle(1000, "linear");} else if (v == "6") {$("p").fadeToggle({duration: 1000});}});</script> </body> </html>4. jQuery中淡入效果fadeTo
淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，但是他們都有個共同的特點，變化的區(qū)間要么是0，要么是1
fadeIn：淡入效果，內(nèi)容顯示，opacity是0到1 fadeOut：淡出效果，內(nèi)容隱藏，opacity是1到0如果要讓元素保持動畫效果，執(zhí)行opacity = 0.5的效果時，要如何處理？
如果不考慮CSS3，我們用JS實現(xiàn)的話，基本就是通過定時器，在設定的時間內(nèi)一點點的修改opacity的值，最終為0.5，原理雖說簡單，但是總不如一鍵設置這么舒服，jQuery提供了fadeTo方法，可以讓改變透明度一步到位
語法
.fadeTo( duration, opacity ,callback)必需的 duration參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設置為給定的不透明度(值介于 0 與 1 之間)。可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。
使用比較簡單，具體使用可以參考右邊代碼：
完整代碼:
<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>p {color: red;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body><h2>fadeTo</h2><p>測試文字透明度效果</p><p>慕課網(wǎng),專注分享</p>透明度的設置效果：<select id="animation"><option value="1">fadeTo( "slow" ,0.5 )</option><option value="2">fadeTo( 1000 ,0.2 )</option><option value="3">fadeTo( 1000 ,0.9 ,complete)</option></select><input id="btnFadeSwitch" type="button" value="點擊切換顯示/隱藏"><script type="text/javascript">//【切換顯示/隱藏】按鈕$("#btnFadeSwitch").click(function() {var v = $("#animation").val();if (v == "1") {$("p").fadeTo("slow", 0.5);} else if (v == "2") {$("p").fadeTo(1000, 0.2);} else if (v == "3") {$("p").fadeTo(1000, 0.9, function() {alert('完成')});}});</script> </body> </html>四、動畫切換的比較
1. jQuery中toggle與slideToggle以及fadeToggle的比較
操作元素的顯示和隱藏可以有幾種方法。
例如：
- 改變樣式display為none
- 設置位置高度為0
- 設置透明度為0
都能達到這個目的，并且針對這樣的處理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，還引入了toggle、sildeToggle以及fadeToggle切換方法
toggle、sildeToggle以及fadeToggle的區(qū)別：- toggle：切換顯示與隱藏效果
- sildeToggle：切換上下拉卷滾效果
- fadeToggle：切換淡入淡出效果
- toggle：動態(tài)效果為從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性
- slideToggle：動態(tài)效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性
fadeToggle方法
-
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。
-
元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。
-
元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。
-
注釋：隱藏的元素不會被完全顯示(不再影響頁面的布局)
五、自定義動畫
1. jQuery中動畫animate(上)
有些復雜的動畫通過之前學到的幾個動畫函數(shù)是不能夠?qū)崿F(xiàn)，這時候就需要強大的animate方法了
操作一個元素執(zhí)行3秒的淡入動畫，對比一下2組動畫設置的區(qū)別
$(elem).fadeOut(3000) $(elem).animate({ opacity:0 },3000)顯而易見，animate方法更加靈活了，可以精確的控制樣式屬性從而執(zhí)行動畫
語法：
.animate( properties ,[ duration ], [ easing ], [ complete ] ) .animate( properties, options )animate()方法允許我們在任意的數(shù)值的CSS屬性上創(chuàng)建動畫。2種語法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用于設置.css()方法的屬性鍵值對類似，除了屬性范圍做了更多限制。第二個參數(shù)開始可以單獨傳遞多個實參也可以合并成一個對象傳遞了
參數(shù)分解：
properties：一個或多個css屬性的鍵值對所構(gòu)成的Object對象。要特別注意所有用于動畫的屬性必須是數(shù)字的，除非另有說明；這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能。比如常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產(chǎn)生動畫效果的。background-color很明顯不可以，因為參數(shù)是red或者GBG這樣的值，非常用插件，否則正常情況下是不能只用動畫效果的。注意，CSS 樣式使用 DOM 名稱(比如 "fontSize")來設置，而非 CSS 名稱(比如 "font-size")。
特別注意單位，屬性值的單位像素(px),除非另有說明。單位em 和 %需要指定使用
.animate({left: 50, width: '50px' opacity: 'show', fontSize: "10em", }, 500);除了定義數(shù)值，每個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏
.animate({width: "toggle" });如果提供一個以+= 或 -=開始的值，那么目標值就是以這個屬性的當前值加上或者減去給定的數(shù)字來計算的
.animate({ left: '+=50px' }, "slow");duration時間
動畫執(zhí)行的時間，持續(xù)時間是以毫秒為單位的；值越大表示動畫執(zhí)行的越慢，不是越快。還可以提供'fast' 和 'slow'字符串，分別表示持續(xù)時間為200 和 600毫秒。
easing動畫運動的算法
jQuery庫中默認調(diào)用 swing。如果需要其他的動畫算法，請查找相關的插件
complete回調(diào)
動畫完成時執(zhí)行的函數(shù)，這個可以保證當前動畫確定完成后發(fā)會觸發(fā)
具體可以參考右邊的代碼效果：
完整代碼:
<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>p {color: red;}div{width:200px; height: 100px; background-color: yellow;color:red;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body><h2>animate(上)</h2><p>慕課網(wǎng),專注分享</p><div id="aaron">內(nèi)部動畫</div>點擊觀察動畫效果：<select id="animation"><option value="1">動畫1</option><option value="2">動畫2</option><option value="3">動畫3</option><option value="4">動畫4</option></select><input id="exec" type="button" value="執(zhí)行動畫"><script type="text/javascript">$("#exec").click(function() {var v = $("#animation").val();var $aaron = $("#aaron");if (v == "1") {// 數(shù)值的單位默認是px$aaron.animate({width :300,height :300});} else if (v == "2") {// 在現(xiàn)有高度的基礎上增加100px$aaron.animate({width : "+=100px",height : "+=100px"});} else if (v == "3") {$aaron.animate({fontSize: "5em"}, 2000, function() {alert("動畫 fontSize執(zhí)行完畢!");});} else if (v == "4") {//通過toggle參數(shù)切換高度$aaron.animate({width: "toggle"});} });</script> </body> </html>2. jQuery中動畫animate(下)
animate在執(zhí)行動畫中，如果需要觀察動畫的一些執(zhí)行情況，或者在動畫進行中的某一時刻進行一些其他處理，我們可以通過animate提供的第二種設置語法，傳遞一個對象參數(shù)，可以拿到動畫執(zhí)行狀態(tài)一些通知
.animate( properties, options )options參數(shù)
- duration?- 設置動畫執(zhí)行的時間
- easing - 規(guī)定要使用的 easing 函數(shù)，過渡使用哪種緩動函數(shù)
- step：規(guī)定每個動畫的每一步完成之后要執(zhí)行的函數(shù)
- progress：每一次動畫調(diào)用的時候會執(zhí)行這個回調(diào)，就是一個進度的概念
- complete：動畫完成回調(diào)
其中最關鍵的一點就是：
如果多個元素執(zhí)行動畫，回調(diào)將在每個匹配的元素上執(zhí)行一次，不是作為整個動畫執(zhí)行一次列出常用的方式：
$('#elem').animate({width: 'toggle', height: 'toggle'}, {duration: 5000,specialEasing: {width: 'linear',height: 'easeOutBounce'},complete: function() {$(this).after('<div>Animation complete.</div>');}});?完整代碼:
<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>p {color: red;}div {width: 200px;height: 100px;background-color: yellow;color: red;}a{display: block}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body><h2>animate(下)</h2><p>慕課網(wǎng),專注分享</p><div id="aaron">內(nèi)部動畫</div>點擊觀察動畫效果：<select id="animation"><option value="1">動畫step動畫</option><option value="2">動畫progress回調(diào)</option></select><a></a><input id="exec" type="button" value="執(zhí)行動畫"><script type="text/javascript">$("#exec").click(function() {var v = $("#animation").val();var $aaron = $("#aaron");if (v == "1") {//觀察每一次動畫的改變$aaron.animate({height: '50'}, {duration :2000,//每一個動畫都會調(diào)用step: function(now, fx) {$aaron.text('高度的改變值:'+now)}})} else if (v == "2") {//觀察每一次進度的變化$aaron.animate({height: '50'}, {duration :2000,//每一步動畫完成后調(diào)用的一個函數(shù)，//無論動畫屬性有多少，每個動畫元素都執(zhí)行單獨的函數(shù)progress: function(now, fx) {$aaron.text('進度:'+arguments[1])// var data = fx.elem.id + ' ' + fx.prop + ': ' + now;// alert(data)}})} });</script> </body> </html>3. jQuery中停止動畫stop
動畫在執(zhí)行過程中是允許被暫停的，當一個元素調(diào)用.stop()方法，當前正在運行的動畫(如果有的話)立即停止
語法：
.stop( [clearQueue ], [ jumpToEnd ] ) .stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )stop還有幾個可選的參數(shù)，簡單來說可以這3種情況
- .stop(); 停止當前動畫，點擊在暫停處繼續(xù)開始
- .stop(true); 如果同一元素調(diào)用多個動畫方法，尚未被執(zhí)行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當調(diào)用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數(shù)提供true值,那么在隊列中的動畫其余被刪除并永遠不會運行
- .stop(true,true); 當前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標值
簡單的說：參考下面代碼、
$("#aaron").animate({height: 300 }, 5000) $("#aaron").animate({width: 300 }, 5000) $("#aaron").animate({opacity: 0.6 }, 2000)六、jQuery核心
1. jQuery中each方法的應用
jQuery中有個很重要的核心方法each，大部分jQuery方法在內(nèi)部都會調(diào)用each，其主要的原因的就是jQuery的實例是一個元素合集
如下：找到所有的div，并且都設置樣式，css只是一個方法，所以內(nèi)部會調(diào)用each處理這個div的合集，給每個div都設置style屬性
$('div').css(...)jQuery的大部分方法都是針元素合集的操作，所以jQuery會提供$(selector).each()來遍歷jQuery對象
.each只是處理jQuery對象的方法，jQuery還提供了一個通用的jQuery.each方法，用來處理對象和數(shù)組的遍歷
語法
jQuery.each(array, callback ) jQuery.each( object, callback )第一個參數(shù)傳遞的就是一個對象或者數(shù)組，第二個是回調(diào)函數(shù)
$.each(["Aaron", "慕課網(wǎng)"], function(index, value) {//index是索引,也就是數(shù)組的索引//value就是數(shù)組中的值了 });each就是for循環(huán)方法的一個包裝，內(nèi)部就是通過for遍歷數(shù)組與對象，通過回調(diào)函數(shù)返回內(nèi)部迭代的一些參數(shù)，第一個參數(shù)是當前迭代成員在對象或數(shù)組中的索引值(從0開始計數(shù))，第二個參數(shù)是當前迭代成員(與this的引用相同
jQuery.each()函數(shù)還會根據(jù)每次調(diào)用函數(shù)callback的返回值來決定后續(xù)動作。如果返回值為false，則停止循環(huán)(相當于普通循環(huán)中的break)；如果返回其他任何值，均表示繼續(xù)執(zhí)行下一個循環(huán)。
$.each(["Aaron", "慕課網(wǎng)"], function(index, value) {return false; //停止迭代 });jQuery方法可以很方便的遍歷一個數(shù)據(jù)，不需要考慮這個數(shù)據(jù)是對象還是數(shù)組
完整代碼:
<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>p {color: red;}div{width:200px; height: 100px; background-color: yellow;color:red;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body><h2>each方法</h2><p>慕課網(wǎng),專注分享</p><div id="aaron"></div>點擊觀察結(jié)果：<select id="animation"><option value="1">each數(shù)組</option><option value="2">each對象</option></select><input id="exec" type="button" value="執(zhí)行動畫"><script type="text/javascript">$("#exec").click(function() {var v = $("#animation").val();var $aaron = $("#aaron");$aaron.empty();if (v == "1") {// 遍歷數(shù)組元素$.each(['Aaron', '慕課網(wǎng)'], function(i, item) {$aaron.append("索引=" + i + "; 元素=" + item);});} else if (v == "2") {// 遍歷對象屬性$.each({name: "張三",age: 18}, function(property, value) {$aaron.append("屬性名=" + property + "; 屬性值=" + value);});} });</script> </body> </html>2. jQuery中查找數(shù)組中的索引inArray
在PHP有in_array()判斷某個元素是否存在數(shù)組中，JavaScript卻沒有，但是jQuery封裝了inArray()函數(shù)判斷元素是否存在數(shù)組中。注意了：在ECMAScript5已經(jīng)有數(shù)據(jù)的indexOf方法支持了，但是jQuery保持了版本向下兼容，所以封裝了一個inArray方法
jQuery.inArray()函數(shù)用于在數(shù)組中搜索指定的值，并返回其索引值。如果數(shù)組中不存在該值，則返回 -1。
語法：
jQuery.inArray( value, array ,[ fromIndex ] )用法非常簡單，傳遞一個檢測的目標值，然后傳遞原始的數(shù)組，可以通過fromIndex規(guī)定查找的起始值，默認數(shù)組是0開始
例如：在數(shù)組中查找值是5的索引
$.inArray(5,[1,2,3,4,5,6,7]) //返回對應的索引：4注意：
如果要判斷數(shù)組中是否存在指定值，你需要通過該函數(shù)的返回值不等于(或大于)-1來進行判斷 完整代碼: <!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>p {color: red;}div{width:200px; height: 100px; background-color: yellow;color:red;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body><h2>inArray方法</h2><p>慕課網(wǎng),專注分享</p><div id="aaron"></div>點擊觀察結(jié)果：<select id="animation"><option value="1">inArray</option><option value="2">inArray</option></select><input id="exec" type="button" value="執(zhí)行動畫"><script type="text/javascript">$("#exec").click(function() {var v = $("#animation").val();var $aaron = $("#aaron");$aaron.empty();if (v == "1") {var index = $.inArray('Aaron',['test','Aaron', 'array','慕課網(wǎng)']);$aaron.text('Aaron的索引是: '+ index)} else if (v == "2") {//指定索引開始的位置var index = $.inArray('a',['a','b','c','d','a','c'],2);$aaron.text('a的索引是: '+ index)} });</script> </body> </html>3. jQuery中去空格神器trim方法
頁面中，通過input可以獲取用戶的輸入值，例如常見的登錄信息的提交處理。用戶的輸入不一定是標準的，輸入一段密碼：' ?1123456 ?"，注意了： 密碼的前后會留空，這可能是用戶的無心的行為，但是密碼確實又沒錯，針對這樣的行為，開發(fā)者應該要判斷輸入值的前后是否有空白符、換行符、制表符這樣明顯的無意義的輸入值。
jQuery.trim()函數(shù)用于去除字符串兩端的空白字符
這個函數(shù)很簡單，沒有多余的參數(shù)用法
需要注意：
- 移除字符串開始和結(jié)尾處的所有換行符，空格(包括連續(xù)的空格)和制表符(tab)
- 如果這些空白字符在字符串中間時，它們將被保留，不會被移除
通過右邊的代碼可以明顯看到trim使用后的效果
完整代碼: <!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body><h2>trim方法</h2>未處理<input type="text" name="" id="results1" value=" 前后留空 " /><input id="exec1" type="button" value="點擊執(zhí)行"> <br />trim處理<input type="text" name="" id="results2" value=" 前后留空 " /><input id="exec2" type="button" value="點擊執(zhí)行"><script type="text/javascript">$("#exec1").click(function() {alert("值的長度：" + $("#results1").val().length)});$("#exec2").click(function() {alert("值的長度：" + $.trim($("#results2").val()).length)});</script> </body> </html>4.jQuery中DOM元素的獲取get方法
jQuery是一個合集對象，如果需要單獨操作合集中的的某一個元素，可以通過.get()方法獲取到
以下有3個a元素結(jié)構(gòu)：
<a>1</a> <a>2</a> <a>3</a>通過jQuery獲取所有的a元素合集$("a")，如果想進一步在合集中找到第二2個dom元素單獨處理，可以通過get方法
語法：
.get( [index ] )注意2點
所以第二個a元素的查找： $(a).get(1)
負索引值參數(shù)
get方法還可以從后往前索引，傳遞一個負索引值，注意的負值的索引起始值是-1
同樣是找到第二元素，可以傳遞?$(a).get(-2)?
具體的使用可以通過右邊的代碼學習
完整代碼:
<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>a {font-size: 30px;font-weight: 900;}div {width: 200px;height: 100px;background-color: yellow;color: red;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body><h2>get方法</h2><div id="aaron"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a></div><select id="animation"><option value="1">get正數(shù)索引參數(shù)</option><option value="2">get負數(shù)索引參數(shù)</option></select><input id="exec" type="button" value="點擊執(zhí)行"><script type="text/javascript">$("#exec").click(function() {var v = $("#animation").val();var $aaron = $("#aaron a");//通過get找到第二個a元素，并修改藍色字體if (v == "1") {$aaron.get(1).style.color = "blue"} else if (v == "2") {//通過get找到最后一個a元素，并修改字體顏色$aaron.get(-1).style.color = "#8A2BE2"}});</script> </body> </html>5. jQuery中DOM元素的獲取index方法
get方法是通過已知的索引在合集中找到對應的元素。如果反過來，已知元素如何在合集中找到對應的索引呢？
.index()方法，從匹配的元素中搜索給定元素的索引值，從0開始計數(shù)。
語法：參數(shù)接受一個jQuery或者dom對象作為查找的條件
.index() .index( selector ) .index( element )- 如果不傳遞任何參數(shù)給 .index() 方法，則返回值就是jQuery對象中第一個元素相對于它同輩元素的位置
- 如果在一組元素上調(diào)用 .index() ，并且參數(shù)是一個DOM元素或jQuery對象， .index() 返回值就是傳入的元素相對于原先集合的位置
- 如果參數(shù)是一個選擇器， .index() 返回值就是原先元素相對于選擇器匹配元素的位置。如果找不到匹配的元素，則 .index() 返回 -1
簡單來說：
<ul><a></a><li id="test1">1</li><li id="test2">2</li><li id="test3">3</li> </ul>$("li").index() 沒有傳遞參數(shù)，反正的結(jié)果是1，它的意思是返回同輩的排列循序，第一個li之前有a元素,同輩元素是a開始為0，所以li的開始索引是1
如果要快速找到第二個li在列表中的索引,可以通過如下2種方式處理
$("li").index(document.getElementById("test2")) //結(jié)果：1 $("li").index($("#test2")) //結(jié)果:1實際的使用可以參考右邊的代碼區(qū)域：
完整代碼: <!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>a {font-size: 30px;font-weight: 900;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body><h2>index方法</h2><ul><a></a><a></a><li id="test1">1</li><li id="test2">2</li><li id="test3">3</li></ul><ul><li id="test4">4</li><li id="test5">5</li><li id="test6">6</li></ul><select id="animation"><option value="1">index無參數(shù)</option><option value="2">index傳遞dom</option><option value="3">index傳遞jQuery對象</option></select><input id="exec" type="button" value="點擊執(zhí)行"><br /><br /> 索引結(jié)果：<span></span><script type="text/javascript">$("#exec").click(function() {var v = $("#animation").val();var $span = $("span");$span.empty();if (v == "1") {//找到第一個li的同輩節(jié)點中的索引位置$span.text($("li").index())} else if (v == "2") {//通過傳遞dom查找$span.text($("li").index(document.getElementById("test5")))} else if (v == "3") {//通過傳遞jQuery對象查找$span.text($("li").index($("#test6")))}});</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的第四章：jQuery动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 未能找到类型或命名空间名称“XXXX”(
- 下一篇： 数字人民币在上海试点，首次实现脱离手机的