jQuery下的動畫處理總結(jié)_jquery

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

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

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

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

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

第一個參數(shù)是隊列名稱，不寫的話默認是fx

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

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

每次調(diào)用此方法執(zhí)行隊列中下一函數(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的，每個動畫都執(zhí)行回掉函數(shù)，調(diào)用隊列中下一個方法，兩個動畫依次執(zhí)行，如果在執(zhí)行期想再添加某個函數(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');
});

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

clearQueue() /stop()

這兩個方法主要是為了取消動畫

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

stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 用于停止正在進行的動畫

queue：正在進行的動畫隊列名稱

clearQueue：默認值為false，是否將隊列本身也清空

jumpToEnd：默認值為false，是否立即執(zhí)行完動畫

如果想停止剛才動畫可以這么寫

代碼如下:$('#test').clearQueue('myQueue');

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

代碼如下:$('#test').stop();

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

slideDown()/ slideUp()/ slideToggle()

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

slideUp( [duration ] [, easing ] [, complete ] ) easing是漸變方式，這個我從來沒有手工改動過，duration不寫的話，默認會用大概一秒的時間完成動畫

slideUp(options)

options中常用的配置有

duration：動畫時間

queue：這個看了上面自然會懂

step:動畫過程中每次屬性改動時執(zhí)行

complete：動畫完成時執(zhí)行

start：動畫開始時執(zhí)行

always：動畫被終止或者意外發(fā)生沒有執(zhí)行完時發(fā)生

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

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

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

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

show()/ hide()/ toggle()

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

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

2.這個動畫同時修改height、width、opacity屬性

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

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

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

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

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

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

.animate( properties, options )

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

duration：動畫時間

queue：function隊列

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

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

start：動畫開始的時候調(diào)用

always：動畫被終止或者意外發(fā)生沒有執(zhí)行完時發(fā)生

要不說jQuery好用，上面這幾個配置是不是很熟悉呢

代碼如下:
$( "#book" ).animate({
width: "toggle",
height: "toggle"
}, {
duration: 5000,
specialEasing: {
width: "linear",
height: "easeOutBounce"
},
complete: function() {
$( this ).after( "Animation complete." );
}
});

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

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com