Home » jQuery 外掛

[jQ]jquery.animate-enhanced 0.89

[ 日期： | 瀏覽：6,541 | 迴響：搶沙發 ]
範例 1
請協助我把這個效果加到我的網站 (只要 600 元)
沒錯!只要 600 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



現在主流瀏覽器大部份都透過私有參數或多或少的支援 CSS3 的 translate 及 transform 等效果，因為這是透過瀏覽器內建的功能來完成，所以在執行效率上會比利用 jQuery 的動畫方式好很多。但除了 IE 暫時無法支援外，再來就是 CSS3 並還沒完全的確定規則，所以並無法統一這樣的方式來執行動畫。

而 jquery.animate-enhanced 則是擴充加強了 jQuery 內建的 .animate()，讓使用者能無痛的升級使用 CSS3 的 translate 及 transform 等效果。它會自動判斷瀏覽器是否支援來決定用那種方式來執行動畫哩！

套件名稱：jquery.animate-enhanced
套件版本：0.89
作者網站：http://playground.benbarnett.net/jquery-animate-enhanced/
套件網址：N/A
發佈日期：2012-01-24
檔案大小：25.0 KB
檔案下載：jquery.animate-enhanced.js

參數選項說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11

avoidTransforms(選填)
描述： 預設是會把 left 及 top 等動畫效果轉用 CSS3 的 transform 來替代並加增效能；若設為 true 則會取消轉換。
預設值： 無
 
useTranslate3d(選填)
描述： 預設是用 2d 的 translate 效果：若設為 true 則會使用 translate3d 來替代(建議只針對 iPhone/iPad 才使用)。
預設值： 無
 
leaveTransforms(選填)
描述： 動畫完成後是否還原 left 及 top 值
預設值： 無

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11

// 使用動畫效果
$(selector).animate(properties [, duration] [, easing] [, complete]);
 
// 使用動畫效果
$(selector).animate(properties, options);
 
// 停止動畫效果
$(selector).animate([queue] [, clearQueue] [, jumpToEnd]);
 
// 從 CSS3 的 Matrix 中取得指定元素在 transform 中的 x 及 y 座標
$(selector').translation();

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.animate-enhanced.js"></script>
<style type="text/css">
	.target-css, .target-dom, .target-css-leave {
		padding: 5px 20px;
		width: 280px;
		background: #0c0;
		margin: 20px 0;
		position: relative;
	}
	.target-dom {
		background:#0cc;
	}
	.target-css-leave {
		background:#fc0;
	}
</style>
<script type="text/javascript">
	$(function(){
		$('button#start').click(function() {
			button = $(this).attr('disabled', 'disabled');
			$('button:not(#start)').removeAttr('disabled');
 
			// 動畫完後還原原 left 及 top 值
			$('.target-css').animate({
				left: "+=200px", 
				width: 320
			}, 1500, function() {
				$(this).animate({
					left: "-=200px",
					width: 280
				}, 1500, function() {
					button.removeAttr('disabled');
					$('button:not(#start)').attr('disabled', 'disabled');
				});
			});
 
			// 動畫完後保留 left 及 top 值
			$('.target-css-leave').animate({
				left: "+=200px",
				width: 320,
				leaveTransforms: true
			}, 1500, function() {
				$(this).animate({
					left: "-=200px",
					width: 280,
					leaveTransforms: true
				}, 1500);
			});
 
			// 不套用 jquery.animate-enhanced 效果
			$('.target-dom').animate({
				left: "+=200px",
				width: 320,
				avoidTransforms: true
			}, 1500, function() {
				$(this).animate({
					left: "-=200px",
					width: 280,
					avoidTransforms: true
				}, 1500);
			});
		});
	});
</script>
 
<body>
	<div class="target-css">
		<p>Animate with CSS3 <b>(leaveTransforms:false)</b></p>
	</div>
 
	<div class="target-css-leave">
		<p>Animate with CSS3 <b>(leaveTransforms:true)</b></p>
	</div>
 
	<div class="target-dom">
		<p>Animate with DOM <b>(avoidTransforms:true)</b></p>
	</div>
 
	<button id="start">Animate</button>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響