最近一年多一直在做前端的東西，由于老板在追求一些年輕動(dòng)感的效果，讓頁(yè)面元素不能僅僅是簡(jiǎn)單的隱藏顯示，所以經(jīng)常會(huì)使用一些動(dòng)畫效果，發(fā)現(xiàn)jQuery的動(dòng)畫真心好用啊，把常用的幾個(gè)總結(jié)一下，希望不再每次使用的時(shí)候還去翻API

queue()/ dequeue()

這兩個(gè)方法就像Ajax的XMLHttpRequest對(duì)象一樣的隱蔽，不為常人所知。這兩個(gè)方法在動(dòng)畫處理的時(shí)候很有用，我們經(jīng)常會(huì)寫一些這樣的代碼

$('#test').animate({"width": "300px","height": "300px","opacity":"1"});

這樣test div的height、width、opacity是同時(shí)變化的，有時(shí)候我們不希望同步執(zhí)行，而是形狀的變化和透明度的變化分開，先變成300*300的div，然后透明度再逐漸變化，我們需要這么寫

$('#test').animate({"width": "300px","height": "300px",}, function () {$('#test').animate({ "opacity": "1" }); });

同學(xué)們可以想象一下要是有十個(gè)動(dòng)畫流程，那代碼是什么樣的，queue()和dequeue()可以解決此類問(wèn)題，為所有的流程方法見(jiàn)一個(gè)隊(duì)列，讓function依次調(diào)用，先看一下語(yǔ)法

queue( [queueName ], newQueue ) 操作欲執(zhí)行隊(duì)列方法

第一個(gè)參數(shù)是隊(duì)列名稱，不寫的話默認(rèn)是fx

第二個(gè)參數(shù)可以是一個(gè)函數(shù)數(shù)組，存放所有隊(duì)列函數(shù)，也可以是一個(gè)回掉函數(shù)，用于向隊(duì)列中添加新函數(shù)

dequeue( [queueName ] ) 為匹配元素執(zhí)行隊(duì)列中的下一個(gè)function

每次調(diào)用此方法執(zhí)行隊(duì)列中下一函數(shù)

var q = [function () {$(this).animate({ "width": "200px", "height":"200px" }, next) }, function () { $(this).animate({ "width": "400px", "height": "400px" }, next); } ]; function next(){ $('#test').dequeue('myQueue'); } $('#test').queue('myQueue', q); next();

上面代碼就是可以讓test div先變成200*200的，然后再變?yōu)?00*400的，每個(gè)動(dòng)畫都執(zhí)行回掉函數(shù)，調(diào)用隊(duì)列中下一個(gè)方法，兩個(gè)動(dòng)畫依次執(zhí)行，如果在執(zhí)行期想再添加某個(gè)函數(shù)可以這樣

var q = [function () {$(this).animate({ "width": "200px", "height":"200px" }, next) }, function () { $(this).animate({ "width": "400px", "height": "400px" }, next); } ]; function next(){ $('#test').dequeue('myQueue'); } $('#test').queue('myQueue', q); next(); $('#test').queue('myQueue',function () { $(this).slideUp().dequeue('myQueue'); });

總而言之這兩個(gè)方法就是為了方便動(dòng)畫按照預(yù)定次序執(zhí)行

clearQueue() /stop()

這兩個(gè)方法主要是為了取消動(dòng)畫

clearQueue( [queueName ] ) 將隊(duì)列中函數(shù)清空

stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 用于停止正在進(jìn)行的動(dòng)畫

queue：正在進(jìn)行的動(dòng)畫隊(duì)列名稱

clearQueue：默認(rèn)值為false，是否將隊(duì)列本身也清空

jumpToEnd：默認(rèn)值為false，是否立即執(zhí)行完動(dòng)畫

如果想停止剛才動(dòng)畫可以這么寫

$('#test').clearQueue('myQueue');

這樣寫不會(huì)不會(huì)終止動(dòng)畫，只是當(dāng)前動(dòng)畫執(zhí)行完后，不會(huì)再調(diào)用隊(duì)列中下一個(gè)動(dòng)畫（隊(duì)列被清空了嘛，沒(méi)有下一個(gè)了），如果想立即停止動(dòng)畫，可以這么寫

$('#test').stop();

至于停止動(dòng)畫是暫停還是立即執(zhí)行完，就學(xué)要配置stop()的參數(shù)了

slideDown()/ slideUp()/ slideToggle()

slide效果在做動(dòng)畫的時(shí)候經(jīng)常會(huì)使用，尤其是菜單，這三個(gè)函數(shù)很簡(jiǎn)單，就是元素收起/伸展/自動(dòng)判斷收起伸展，但是其參數(shù)不僅僅是duration，我們還能加一些其他的控制，看看API中的介紹，這Sanger函數(shù)參數(shù)類似，那slideUp舉例

slideUp( [duration ] [, easing ] [, complete ] ) easing是漸變方式，這個(gè)我從來(lái)沒(méi)有手工改動(dòng)過(guò)，duration不寫的話，默認(rèn)會(huì)用大概一秒的時(shí)間完成動(dòng)畫

slideUp(options)

options中常用的配置有

duration：動(dòng)畫時(shí)間

queue：這個(gè)看了上面自然會(huì)懂

step:動(dòng)畫過(guò)程中每次屬性改動(dòng)時(shí)執(zhí)行

complete：動(dòng)畫完成時(shí)執(zhí)行

start：動(dòng)畫開始時(shí)執(zhí)行

always：動(dòng)畫被終止或者意外發(fā)生沒(méi)有執(zhí)行完時(shí)發(fā)生

?

這三個(gè)函數(shù)在執(zhí)行的時(shí)候會(huì)修改元素height，在sideUp()執(zhí)行完后會(huì)把height復(fù)原，并把diaplay設(shè)為none

fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo()

fadeIn()/ fadeOut()/ fadeToggle() 的用法和slide系列類似，不再一一說(shuō)明，只不過(guò)這三個(gè)函數(shù)修改的時(shí)元素的透明度，fadeOut()函數(shù)在執(zhí)行完后會(huì)將元素opacity復(fù)原，并把display屬性設(shè)為none

fadeTo( duration, opacity [, easing ] [, complete ] ) fadeTo()方法就沒(méi)有那么復(fù)雜了，但是fadeTO()的duration和opacity不是可省略的，必須寫

show()/ hide()/ toggle()

這三個(gè)函數(shù)的用法和slide系列一樣，但是在效果上有幾點(diǎn)兒不同

1.如果參數(shù)duration不寫，那么回立即執(zhí)行沒(méi)有動(dòng)畫

2.這個(gè)動(dòng)畫同時(shí)修改height、width、opacity屬性

3.hide()執(zhí)行完成后會(huì)將height、width、opacity屬性還原，并把display設(shè)為none

animate()

有些復(fù)雜的動(dòng)畫靠上面幾個(gè)函數(shù)不能夠?qū)崿F(xiàn)，這時(shí)候就是強(qiáng)大的animate派上用場(chǎng)的時(shí)候了,animate()有兩種用法

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

大部分屬性都不用解釋，properties是個(gè)json，屬性的值可以是字面量、function、”toggle”、簡(jiǎn)單表達(dá)式，如果是 function會(huì)把返回值賦給屬性，熟悉jQuery的同學(xué)肯定明白“toggle”是什么，就是讓一個(gè)屬性在初始值和最小值之間切換，能夠使用 toggle的屬性有width、height、opacity等包含數(shù)字值屬性，簡(jiǎn)單表達(dá)式是+=、-=等，比如可以這么些 “width”:”+=10px”。

$( "#block" ).animate({width: "70%",opacity: 0.4,marginLeft: "0.6in",fontSize: "3em",borderWidth: "+=10px" }, 1500 );

如果傳入了回掉函數(shù)，該函數(shù)會(huì)在動(dòng)畫執(zhí)行完后調(diào)用

.animate( properties, options )

這種用法更為靈活，properties和前一個(gè)用法一樣，常用options有

duration：動(dòng)畫時(shí)間

queue：function隊(duì)列

step：每次屬性調(diào)整的回掉函數(shù)

complete：完成動(dòng)畫的回掉函數(shù)

start：動(dòng)畫開始的時(shí)候調(diào)用

always：動(dòng)畫被終止或者意外發(fā)生沒(méi)有執(zhí)行完時(shí)發(fā)生

要不說(shuō)jQuery好用，上面這幾個(gè)配置是不是很熟悉呢

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

hover()

嚴(yán)格說(shuō)這個(gè)并不是個(gè)動(dòng)畫函數(shù)，但是由于低版本IE的hover對(duì)很多元素都不起作用，用CSS無(wú)法完成很多動(dòng)作，所以經(jīng)常需要使用JavaScript進(jìn)行haver事件的處理。

.hover( handlerIn(eventObject), handlerOut(eventObject) )

方法很簡(jiǎn)單，不多介紹了，這樣就能把mousein 和mouseout寫在一起了。

轉(zhuǎn)載于:https://www.cnblogs.com/gongzhujiademao/articles/4221799.html

總結(jié)

以上是生活随笔為你收集整理的jQuery的动画处理总结 BY：色拉油啊油的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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