Home » jQuery 外掛

[jQ]jQuery Easing 1.3

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

jQuery Easing 1.3

jQuery Easing 擴充了原來 jQuery 中的動畫效果，增加了約 30 個不同的效果，有些套件中的動畫效果也可能有用到。

套件名稱：jQuery Easing
套件版本：1.3
作者網站：http://gsgd.co.uk/sandbox/jquery/easing/
套件網址：http://plugins.jquery.com/project/Easing
發佈日期：2007-11-12
檔案大小：7.90 KB
檔案下載：jquery.easing.1.3.js

屬性說明：

檢視原始碼 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

Properties
jswing(原 jQuery.easing['swing'])
def(預設為 'easeOutQuad')
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

使用範例：

檢視原始碼 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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<style type="text/css">
	.big {
		background:#EEE;
		height:100px;
	}
	.big a {
		display:block;
		padding:5px 0 0 10px;
		font-size:2em;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 在 #controls 中加入一個 select 物件
		var sel1 = $("<select>").appendTo('#controls');
		// 在 sel1 物件中加上 option，其值由 $.easing 中取得
		for (x in $.easing){
			if (x != 'linear' && x != 'swing'){
				sel1.append($('<option>').attr('value', x).text(x));
			}
		}
		// 複製一個 sel1 並加到 #controls 中
		var sel2 = sel1.clone().appendTo('#controls');
		// 指定 sel1 及 sel2 初始值
		sel1.val('easeInOutCirc');
		sel2.val('easeOutBounce');
		// 當 #toggle 被 click 時..
		// 本身先取消焦點
		// 讓 #example 產生動畫效果：
		// 先變高，漸變過程的動畫效果為 sel1 的方式，過程為 1000 毫秒
		// 再變回高度，漸變過程的動畫效果為 sel2 的方式，過程為 1000 毫秒
		$("#toggle").click(function(e){
			this.blur();
			$('#example').animate({height:200}, {duration: 1000, easing: sel1.val()}).animate({height:100}, {duration: 1000, easing: sel2.val()});
		});
	});
</script>
 
<body>
	<p id="controls"></p>
	<p id="example" class="big"><a href="#example" id="toggle">按我按我!!</a></p>
	<div class="d"></div>
</body>

範例 1

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

3 筆針對 [jQ]jQuery Easing 1.3 的迴響

發表迴響