亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

語法：

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

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

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

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

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

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

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

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

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

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

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

.animate(?properties,?options?)

options參數

• duration?- 設置動畫執行的時間

• easing - 規定要使用的 easing 函數，過渡使用哪種緩動函數

• step：規定每個動畫的每一步完成之后要執行的函數

• progress：每一次動畫調用的時候會執行這個回調，就是一個進度的概念

• complete：動畫完成回調

其中最關鍵的一點就是：

如果多個元素執行動畫，回調將在每個匹配的元素上執行一次，不是作為整個動畫執行一次

列出常用的方式：

$('#elem').animate({
????width:?'toggle',??
????height:?'toggle'
??},?{
????duration:?5000,
????specialEasing:?{
??????width:?'linear',
??????height:?'easeOutBounce'
????},
????complete:?function()?{
??????$(this).after('<div>Animation?complete.</div>');
????}
??});

操作一個元素執行3秒的淡入動畫，對比一下2組動畫設置的區別

$(elem).fadeOut(3000)??
$(elem).animate({???
????opacity:0
},3000)

顯而易見，animate方法更加靈活了，可以精確的控制樣式屬性從而執行動畫

語法：

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

.animate()方法允許我們在任意的數值的CSS屬性上創建動畫。2種語法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用于設置.css()方法的屬性鍵值對類似，除了屬性范圍做了更多限制。第二個參數開始可以單獨傳遞多個實參也可以合并成一個對象傳遞了

參數分解：

properties：一個或多個css屬性的鍵值對所構成的Object對象。要特別注意所有用于動畫的屬性必須是數字的，除非另有說明；這些屬性如果不是數字的將不能使用基本的jQuery功能。比如常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產生動畫效果的。background-color很明顯不可以，因為參數是red或者GBG這樣的值，非常用插件，否則正常情況下是不能只用動畫效果的。注意，CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設置，而非 CSS 名稱（比如 "font-size"）。

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

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

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

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

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

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

duration時間

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

easing動畫運動的算法

jQuery庫中默認調用 swing。如果需要其他的動畫算法，請查找相關的插件

complete回調

動畫完成時執行的函數，這個可以保證當前動畫確定完成后發會觸發

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

• 改變樣式display為none

• 設置位置高度為0

• 設置透明度為0

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

toggle、sildeToggle以及fadeToggle的區別：

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

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

• fadeToggle：切換淡入淡出效果

當然細節上還是有更多的不同點:

toggle與slideToggle細節區別：

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

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

fadeToggle方法

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

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

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

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

如果要讓元素保持動畫效果，執行opacity = 0.5的效果時:

語法

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

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

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

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

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

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

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

?

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

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

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

• 元素顯示完畢后需要執行的函數。函數內的this指向當前DOM元素。

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

注意：

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

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

讓元素在頁面不可見，常用的辦法就是通過設置樣式的display:none。除此之外還可以一些類似的辦法可以達到這個目的。這里要提一個透明度的方法，設置元素透明度為0，可以讓元素不可見，透明度的參數是0~1之間的值，通過改變這個值可以讓元素有一個透明度的效果。常見的淡入淡出動畫正是這樣的原理。

fadeOut()函數用于隱藏所有匹配的元素，并帶有淡出的過渡動畫效果

所謂"淡出"隱藏的，元素是隱藏狀態不對作任何改變，元素是可見的，則將其隱藏。

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

通過不透明度的變化來實現所有匹配元素的淡出效果，并在動畫完成后可選地觸發一個回調函數。這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。

字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數被省略，那么默認使用400毫秒的延時

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

基本的操作：slideToggle();

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

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

同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會完成動畫，然后出發回調函數

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

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

注意：

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

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

對于顯示的元素，在將其隱藏的過程中，可以對其進行一些變化的動畫效果。之前學過了hide方法，hide方法在顯示的過程中也可以有動畫，但 是.hide()方法將為匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這里將要學習一個新的顯示方法slideUp方法

最簡單的使用：不帶參數

$("elem").slideUp();

這個使用的含義就是：找到元素的高度，然后采用一個下滑動畫讓元素一直滑到隱藏，當高度為0的時候，也就是不可見的時，修改元素display 樣式屬性被設置為none。這樣就能確保這個元素不會影響頁面布局了

帶參數：

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

同樣可以提供一個時間，然后可以使用一種過渡使用哪種緩動函數，jQuery默認就2種，可以通過下載插件支持。最后一個動畫結束的回調方法。

因為動畫是異步的，所以要在動畫之后執行某些操作就必須要寫到回調函數里面，這里要特別注意

對于隱藏的元素，在將其顯示出來的過程中，可以對其進行一些變化的動畫效果。之前學過了show方法，show方法在顯示的過程中也可以有動畫，但是.show()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這里將要學習一個新的顯示方法slideDown方法

.slideDown()：用滑動動畫顯示一個匹配元素

.slideDown()方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式

常見的操作，提供一個動畫是時間，然后傳遞一個回調，用于知道動畫是什么時候結束

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

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

具體使用：

$("ele").slideDown(1000,?function()?{
????//等待動畫執行1秒后,執行別的動作....
});

注意事項：

• 下拉動畫是從無到有，所以一開始元素是需要先隱藏起來的，可以設置display:none

• 如 果提供回調函數參數，callback會在動畫完成的時候調用。將不同的動畫串聯在一起按順序排列執行是非常有用的。這個回調函數不設置任何參數，但是 this會設成將要執行動畫的那個DOM元素，如果多個元素一起做動畫效果，那么要非常注意，回調函數會在每一個元素執行完動畫后都執行一次，而不是這組 動畫整體才執行一次

show與hide是一對互斥的方法。需要對元素進行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態，然后調用其對應的處理方法。比如顯示的元素，那么就要調用hide，反之亦然。 對于這樣的操作行為，jQuery提供了一個便捷方法toggle用于切換顯示或隱藏匹配元素

基本的操作：toggle();

這是最基本的操作，處理元素顯示或者隱藏，因為不帶參數，所以沒有動畫。通過改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒有動畫。

• 如果元素是最初顯示，它會被隱藏

• 如果隱藏的，它會顯示出來

display屬性將被儲存并且需要的時候可以恢復。如果一個元素的display值為inline，然后是隱藏和顯示，這個元素將再次顯示inline

提供參數：.toggle( [duration ] [, complete ] )

同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會發生顯示/隱藏的改變，在改變的過程中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法

直接定位：.toggle(display)

直接提供一個參數，指定要改變的元素的最終效果

其實就是確定是使用show還是hide方法

if?(?display?===?true?)?{
??$(?"elem"?).show();
}?else?if?(?display?===?false?)?{
??$(?"elem"?).hide();
}

css中有display:none屬性，同時也有display:block，所以jQuery同樣提供了與hide相反的show方法

方法的使用幾乎與hide是一致的，hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示

看一段代碼：使用上一致，結果相反

$('elem').hide(3000).show(3000)

讓元素執行3秒的隱藏動畫，然后執行3秒的顯示動畫。

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

注意事項：

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

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

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

1注意所有用于動畫的屬性必須是數字的

2CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設置，而非 CSS 名稱（比如 "font-size"）。

3除了定義數值，每個屬性能使用'show', 'hide', 和 'toggle'。

4如果提供一個以+= 或 -=開始的值，那么目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的

5

easing動畫運動的算法:jQuery庫中默認調用 swing。

$("#exec").click(function() {
??????? var v = $("#animation").val();
??????? var $aaron = $("#aaron");
??????? if (v == "1") {
??????????? //觀察每一次動畫的改變
??????????? $aaron.animate({
??????????????? height: '50'
??????????? }, {
??????????????? duration :2000,
??????????????? //每一個動畫都會調用
??????????????? step: function(now, fx) {
?????????????????? $aaron.text('高度的改變值:'+arguments[0])
?? ??? ??? ??? ??? //arguments[]此時相當于一個數組，arguments[0]代表參數now,arguments[1]代表參數fx
?? ??? ??? ??? ??? var data = fx.elem.id;//執行動畫的元素--此處為id="aaron"的div元素本身
?? ??? ??? ??? ??? // var data = fx.prop;//動畫正在改變的屬性--此處為height
?? ??? ??? ??? ??? // var data = fx.end;//動畫正在改變的結束值--此處為50
?? ??? ??? ??? ??? // var data = fx.unit;//動畫正在改變的屬性的單位--此處為px
?? ??? ??? ??? ??? alert(data);
??????????????? }
??????????? })
??????? } else if (v == "2") {
??????????? //觀察每一次進度的變化
??????????? $aaron.animate({
??????????????? height: '50'
??????????? }, {
??????????????? duration :2000,
??????????????? //每一步動畫完成后調用的一個函數，
??????????????? //無論動畫屬性有多少，每個動畫元素都執行單獨的函數
??????????????? progress: function(now, fx) {
?????????????????? $aaron.text('進度:'+arguments[1])
?? ??? ??? ??? ??? // $aaron.text('進度:'+fx)//arguments[1]相當于fx
?????????????????? ?
??????????????? }
??????????? })
??????? }