jQuery中停止動畫stop

動畫在執(zhí)行過程中是允許被暫停的，當(dāng)一個元素調(diào)用.stop()方法，當(dāng)前正在運行的動畫（如果有的話）立即停止

語法：

.stop(?[clearQueue?],?[?jumpToEnd?]?)?.stop(?[queue?],?[?clearQueue?]?,[?jumpToEnd?]?)

stop還有幾個可選的參數(shù)，簡單來說可以這3種情況

• .stop(); 停止當(dāng)前動畫，點擊在暫停處繼續(xù)開始

• .stop(true); 如果同一元素調(diào)用多個動畫方法，尚未被執(zhí)行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當(dāng)調(diào)用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數(shù)提供true值,那么在隊列中的動畫其余被刪除并永遠(yuǎn)不會運行

• .stop(true,true); 當(dāng)前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標(biāo)值

簡單的說：參考下面代碼、

$("#aaron").animate({?????height:?300?},?5000)?$("#aaron").animate({?????width:?300?},?5000)?$("#aaron").animate({?????opacity:?0.6?},?2000)

1. stop()：只會停止第一個動畫，第二個第三個繼續(xù)

2. stop(true)：停止第一個、第二個和第三個動畫

3. stop(true ture)：停止動畫，直接跳到第一個動畫的最終狀態(tài)?

jQuery中動畫animate(下)

animate在執(zhí)行動畫中，如果需要觀察動畫的一些執(zhí)行情況，或者在動畫進行中的某一時刻進行一些其他處理，我們可以通過animate提供的第二種設(shè)置語法，傳遞一個對象參數(shù)，可以拿到動畫執(zhí)行狀態(tài)一些通知

.animate(?properties,?options?)

options參數(shù)

• duration?- 設(shè)置動畫執(zhí)行的時間

• easing - 規(guī)定要使用的 easing 函數(shù)，過渡使用哪種緩動函數(shù)

• step：規(guī)定每個動畫的每一步完成之后要執(zhí)行的函數(shù)

• progress：每一次動畫調(diào)用的時候會執(zhí)行這個回調(diào)，就是一個進度的概念

• complete：動畫完成回調(diào)

其中最關(guān)鍵的一點就是：

如果多個元素執(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>');?????}???});

width: "toggle" //設(shè)置為左右隱藏
height:"toggle" //設(shè)置為上下滑動隱藏
opacity:"toggle" //設(shè)置為淡出淡入隱藏 opacity是透明度

jQuery中動畫animate(上)

有些復(fù)雜的動畫通過之前學(xué)到的幾個動畫函數(shù)是不能夠?qū)崿F(xiàn)，這時候就需要強大的animate方法了

操作一個元素執(zhí)行3秒的淡入動畫，對比一下2組動畫設(shè)置的區(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屬性鍵值對。這組屬性和用于設(shè)置.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"）來設(shè)置，而非 CSS 名稱（比如 "font-size"）。

特別注意單位，屬性值的單位像素（px）,除非另有說明。單位em 和 %需要指定使用

.animate({?????left:?50,??????width:?'50px'????????opacity:?'show',???????fontSize:?"10em",?},?500);

除了定義數(shù)值，每個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏

.animate({?????width:?"toggle"?});

如果提供一個以+= 或 -=開始的值，那么目標(biāo)值就是以這個屬性的當(dāng)前值加上或者減去給定的數(shù)字來計算的

.animate({??????left:?'+=50px'?},?"slow");

duration時間

動畫執(zhí)行的時間，持續(xù)時間是以毫秒為單位的；值越大表示動畫執(zhí)行的越慢，不是越快。還可以提供'fast' 和 'slow'字符串，分別表示持續(xù)時間為200 和 600毫秒。

easing動畫運動的算法

jQuery庫中默認(rèn)調(diào)用 swing。如果需要其他的動畫算法，請查找相關(guān)的插件

complete回調(diào)

動畫完成時執(zhí)行的函數(shù)，這個可以保證當(dāng)前動畫確定完成后發(fā)會觸發(fā)

jQuery中toggle與slideToggle以及fadeToggle的比較

操作元素的顯示和隱藏可以有幾種方法。
例如：

• 改變樣式display為none

• 設(shè)置位置高度為0

• 設(shè)置透明度為0

都能達(dá)到這個目的，并且針對這樣的處理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，還引入了toggle、sildeToggle以及fadeToggle切換方法

toggle、sildeToggle以及fadeToggle的區(qū)別：

• toggle：切換顯示與隱藏效果

• sildeToggle：切換上下拉卷滾效果

• fadeToggle：切換淡入淡出效果

當(dāng)然細(xì)節(jié)上還是有更多的不同點:

toggle與slideToggle細(xì)節(jié)區(qū)別：

• toggle：動態(tài)效果為從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性

• slideToggle：動態(tài)效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性

fadeToggle方法

• fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。

• 元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。

• 元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。

• 注釋：隱藏的元素不會被完全顯示（不再影響頁面的布局）

淡入淡出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)的話，基本就是通過定時器，在設(shè)定的時間內(nèi)一點點的修改opacity的值，最終為0.5，原理雖說簡單，但是總不如一鍵設(shè)置這么舒服，jQuery提供了fadeTo方法，可以讓改變透明度一步到位

語法

.fadeTo(?duration,?opacity?,callback)

必需的 duration參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）。可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。

// 顯示隱藏 .hide()+.show() = .toggle()
// 下拉上卷 .slideUp()+.slideDown() = .slideToggle()
// 淡入淡出 .fadeOut()+.fadeIn() = .fadeToggle()
需要在后面加阻止事件 否則點擊多次 他會不停的出入 阻止事件 如 return false 或者給動畫加一個時間

jQuery中淡入淡出切換fadeToggle

fadeToggle()函數(shù)用于切換所有匹配的元素，并帶有淡入/淡出的過渡動畫效果。之前也學(xué)過toggle、slideToggle 也是類似的處理方式

fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即如果元素當(dāng)前是可見的，則將其隱藏(淡出)；如果元素當(dāng)前是隱藏的，則使其顯示(淡入)。

常用語法：.fadeToggle( [duration ] ,[?complete ] )

可選的?duration?參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。 可選的 callback 參數(shù)是 fadeToggle完成后所執(zhí)行的函數(shù)名稱。

fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

fadeOut是淡出效果，相反的還有淡入效果fadeIn,方法使用上兩者都是一致的，只是結(jié)果相反

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

• duration：指定過渡動畫運行多長時間(毫秒數(shù))，默認(rèn)值為400。該參數(shù)也可以為字符串"fast"(=200)或"slow"(=600)。

• 元素顯示完畢后需要執(zhí)行的函數(shù)。函數(shù)內(nèi)的this指向當(dāng)前DOM元素。

fadeIn()函數(shù)用于顯示所有匹配的元素，并帶有淡入的過渡動畫效果。

注意：

• 淡入的動畫原理：操作元素的不透明度從0%逐漸增加到100%

• 如果元素本身是可見的，不對其作任何改變。如果元素是隱藏的，則使其可見

jQuery中淡出動畫fadeOut

讓元素在頁面不可見，常用的辦法就是通過設(shè)置樣式的display:none。除此之外還可以一些類似的辦法可以達(dá)到這個目的。這里要提一個透明度的方法，設(shè)置元素透明度為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ù)被省略，那么默認(rèn)使用400毫秒的延時

jQuery中上卷下拉切換slideToggle

slideDown與slideUp是一對相反的方法。需要對元素進行上下拉卷效果的切換，jQuery提供了一個便捷方法slideToggle用滑動動畫顯示或隱藏一個匹配元素

基本的操作：slideToggle();

這是最基本的操作，獲取元素的高度，使這個元素的高度發(fā)生改變，從而讓元素里的內(nèi)容往下或往上滑。

提供參數(shù)：.slideToggle( [duration ] ,[?complete ] )

同樣的提供了時間、還有動畫結(jié)束的回調(diào)。在參數(shù)對應(yīng)的時間內(nèi)，元素會完成動畫，然后出發(fā)回調(diào)函數(shù)

同時也提供了時間的快速定義，字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時

slideToggle("fast")??slideToggle("slow")

注意：

• display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復(fù)到其初始值

• 當(dāng)一個隱藏動畫后，高度值達(dá)到0的時候，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁面布局

show與hide方法是非常常用的，但是一般很少會基于這2個屬性執(zhí)行動畫，大多情況下還是直接操作元素的顯示與隱藏為主

注意事項：

• show與hide方法是修改的display屬性，通過是visibility屬性布局需要通過css方法單獨設(shè)置

• 如果使用!important在你的樣式中，比如display: none !important，如果你希望.show()方法正常工作，必須使用.css('display', 'block !important')重寫樣式

• 如果讓show與hide成為一個動畫，那么默認(rèn)執(zhí)行動畫會改變元素的高度，高度，透明度

?

slideDown(?[duration?]?[,?complete?]?)

持續(xù)時間（duration）是以毫秒為單位的，數(shù)值越大，動畫越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數(shù)被省略，那么默認(rèn)使用400 毫秒的延時。

這里用的是get()方法，什么用eq()就不行了?

如果想改成eq()是可以的。但是只把get()改成eq()是不行的。因為對$()用get()，那個$()所取到的元素就變成了dom，也就是變成了js。那么js取得的元素后面就必須跟js的方法或者屬性，既$().get().style()。而不是$().get().css()。因為style是js獨有的方法，而css()是jq獨有的方法，get（）方法后取得的js元素，它只能識別style（），而不能識別css（）。

可以，只不過eq()是jquery方法，用了get()就只能用dom方法

jQuery是一個合集對象，如果需要單獨操作合集中的某一個元素，可以通過.get（）方法獲取。

語法：

.get(?[index?]?)

注意2點

1. get方法是獲取的dom對象，也就是通過document.getElementById獲取的對象

2. get方法是從0開始索引

所以第二個a元素的查找： $(a).get(1)

負(fù)索引值參數(shù)

get方法還可以從后往前索引，傳遞一個負(fù)索引值，注意的負(fù)值的索引起始值是-1

同樣是找到第二元素，可以傳遞?$(a).get(-2)?