系統學習 jQuery (六) 動畫特效

對於頁面上的動畫特效 jQuery 也能輕鬆搞定。jQuery 動畫的機制和操作 DOM 的機制相同,也是用選擇器和篩選函數找出要應用動畫的元素,再對它們定義和播放動畫。


jQuery 常用動畫和特效函數:

slideDown(time, cb) 通過高度變化(向下增大)來動態地顯示所有匹配的元素,在顯示完成後可選地觸發一個回調函數。time 動畫時間,毫秒爲單位
slideUp(time, cb) 通過高度變化(向上減小)來動態地顯示所有匹配的元素,在顯示完成後可選地觸發一個回調函數。time 動畫時間,毫秒爲單位
slideToggle(time, cb) 開關 slide 變化
fadeIn(time, cb) 通過不透明度的變化來實現所有匹配元素的淡入效果,並在動畫完成後可選地觸發一個回調函數。
fadeOut(time, cb) 通過不透明度的變化來實現所有匹配元素的淡出效果,並在動畫完成後可選地觸發一個回調函數。
fadeTo(time, opacity, cb) 將不透明度在一定時間內調整到特定值,並在動畫完成後可選地觸發一個回調函數。
fadeToggle(time, cb) 開關 fade 變化
animate(pars, time, cb) 自定義動畫函數,在指定時間內將元素的樣式變到 pars 指定的值,
這個對象中每個屬性都表示一個可以變化的樣式屬性(如“height”、“top”或“opacity”)。注意:所有指定的屬性必須用駱駝形式,比如用marginLeft代替margin-left。
在動畫完成後可選地觸發一個回調函數 cb。
delay(time, cb) 在對象的動畫隊列中插入一段延遲,並在延遲完成後可選地觸發一個回調函數。

以上動畫函數都能通過鏈式操作串聯起來,實現一個動畫結束後再開始另一個動畫的效果。

另外還有兩個結束動畫的函數:
stop(clearQueue, gotoEnd) 結束對象動畫隊列中的動畫。
finish() 讓對象動畫隊列中的動畫立即完成。

更多 jQuery 動畫特效函數請參考API http://jquery.cuishifeng.cn/slideDown.html


代碼示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../lib/jquery-1.11.2/jquery.js"></script>
	<style>
		.wrap {height: 40px; position: relative;}
		.wrap div {position: absolute;}
	</style>
</head>
<body>
<div class="wrap"><div id="div">Hello World!</div></div>
<div class="wrap"><div id="div2">Hello World!</div></div>
<div class="wrap"><div id="div3">Hello World!</div></div>
<div class="wrap"><div id="div4">Hello World!</div></div>
<script>
	// 2秒 淡出對象
	$('#div').fadeOut(2000);
	
	// 2秒 收起對象,收起後打印一段文字
    $('#div2').slideUp(2000, function() {console.log('hello world!'); });
	
	// 右移動對象,左移對象,淡出對象
	$('#div3').animate({left: '200px'}, 1000).delay(1000).animate({left: 0}, 1000).fadeOut(1000);
	
	// 右移對象,左移對象,如此往復
	(function() {
		$('#div4').animate({left: '200px'}, 1000).animate({left: 0}, 1000, arguments.callee);
	})();
</script>
</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章