queue()/ dequeue()
這兩個方法就像Ajax的XMLHttpRequest對象一樣的隱蔽,不為常人所知。這兩個方法在動畫處理的時候很有用,我們經常會寫一些這樣的代碼
. 代碼如下:
$('#test').animate({
"width": "300px",
"height": "300px",
"opacity":"1"
});
這樣test div的height、width、opacity是同時變化的,有時候我們不希望同步執行,而是形狀的變化和透明度的變化分開,先變成300*300的div,然後透明度再逐漸變化,我們需要這麼寫
. 代碼如下:
$('#test').animate({
"width": "300px",
"height": "300px",
}, function () {
$('#test').animate({ "opacity": "1" });
});
同學們可以想象一下要是有十個動畫流程,那代碼是什麼樣的,queue()和dequeue()可以解決此類問題,為所有的流程方法見一個隊列,讓function依次調用,先看一下語法
queue( [queueName ], newQueue ) 操作欲執行隊列方法
第一個參數是隊列名稱,不寫的話默認是fx
第二個參數可以是一個函數數組,存放所有隊列函數,也可以是一個回掉函數,用於向隊列中添加新函數
dequeue( [queueName ] ) 為匹配元素執行隊列中的下一個function
每次調用此方法執行隊列中下一函數
. 代碼如下:
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的,然後再變為400*400的,每個動畫都執行回掉函數,調用隊列中下一個方法,兩個動畫依次執行,如果在執行期想再添加某個函數可以這樣
. 代碼如下:
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');
});
總而言之這兩個方法就是為了方便動畫按照預定次序執行
clearQueue() /stop()
這兩個方法主要是為了取消動畫
clearQueue( [queueName ] ) 將隊列中函數清空
stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 用於停止正在進行的動畫
queue:正在進行的動畫隊列名稱
clearQueue:默認值為false,是否將隊列本身也清空
jumpToEnd:默認值為false,是否立即執行完動畫
如果想停止剛才動畫可以這麼寫
. 代碼如下:$('#test').clearQueue('myQueue');
這樣寫不會不會終止動畫,只是當前動畫執行完後,不會再調用隊列中下一個動畫(隊列被清空了嘛,沒有下一個了),如果想立即停止動畫,可以這麼寫
. 代碼如下:$('#test').stop();
至於停止動畫是暫停還是立即執行完,就學要配置stop()的參數了
slideDown()/ slideUp()/ slideToggle()
slide效果在做動畫的時候經常會使用,尤其是菜單,這三個函數很簡單,就是元素收起/伸展/自動判斷收起伸展,但是其參數不僅僅是duration,我們還能加一些其他的控制,看看API中的介紹,這Sanger函數參數類似,那slideUp舉例
slideUp( [duration ] [, easing ] [, complete ] ) easing是漸變方式,這個我從來沒有手工改動過,duration不寫的話,默認會用大概一秒的時間完成動畫
slideUp(options)
options中常用的配置有
duration:動畫時間
queue:這個看了上面自然會懂
step:動畫過程中每次屬性改動時執行
complete:動畫完成時執行
start:動畫開始時執行
always:動畫被終止或者意外發生沒有執行完時發生
這三個函數在執行的時候會修改元素height,在sideUp()執行完後會把height復原,並把diaplay設為none
fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo()
fadeIn()/ fadeOut()/ fadeToggle() 的用法和slide系列類似,不再一一說明,只不過這三個函數修改的時元素的透明度,fadeOut()函數在執行完後會將元素opacity復原,並把display屬性設為none
fadeTo( duration, opacity [, easing ] [, complete ] ) fadeTo()方法就沒有那麼復雜了,但是fadeTO()的duration和opacity不是可省略的,必須寫
show()/ hide()/ toggle()
這三個函數的用法和slide系列一樣,但是在效果上有幾點兒不同
1.如果參數duration不寫,那麼回立即執行沒有動畫
2.這個動畫同時修改height、width、opacity屬性
3.hide()執行完成後會將height、width、opacity屬性還原,並把display設為none
animate()
有些復雜的動畫靠上面幾個函數不能夠實現,這時候就是強大的animate派上用場的時候了,animate()有兩種用法
.animate( properties [, duration ] [, easing ] [, complete ] )
大部分屬性都不用解釋,properties是個json,屬性的值可以是字面量、function、”toggle”、簡單表達式,如果是function會把返回值賦給屬性,熟悉jQuery的同學肯定明白“toggle”是什麼,就是讓一個屬性在初始值和最小值之間切換,能夠使用toggle的屬性有width、height、opacity等包含數字值屬性,簡單表達式是+=、-=等,比如可以這麼些 “width”:”+=10px”。
. 代碼如下:
$( "#block" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "+=10px"
}, 1500 );
如果傳入了回掉函數,該函數會在動畫執行完後調用
.animate( properties, options )
這種用法更為靈活,properties和前一個用法一樣,常用options有
duration:動畫時間
queue:function隊列
step:每次屬性調整的回掉函數
complete:完成動畫的回掉函數
start:動畫開始的時候調用
always:動畫被終止或者意外發生沒有執行完時發生
要不說jQuery好用,上面這幾個配置是不是很熟悉呢
. 代碼如下:
$( "#book" ).animate({
width: "toggle",
height: "toggle"
}, {
duration: 5000,
specialEasing: {
width: "linear",
height: "easeOutBounce"
},
complete: function() {
$( this ).after( "<div>Animation complete.</div>" );
}
});
hover()
嚴格說這個並不是個動畫函數,但是由於低版本IE的hover對很多元素都不起作用,用CSS無法完成很多動作,所以經常需要使用JavaScript進行haver事件的處理。
.hover( handlerIn(eventObject), handlerOut(eventObject) )
方法很簡單,不多介紹了,這樣就能把mousein 和mouseout寫在一起了。