Home » jQuery 外掛

[jQ]Pause jQuery plugin 0.1

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



jQuery 本身的動畫只有停止的功能，一但停止(stop)後就無法自動接著做未做完的動畫內容。因此 Pause 外掛擴充了 animate() 的功能，讓它可以支援暫停(pause)及恢復(resume)動畫等指令。

套件名稱：Pause jQuery plugin
套件版本：0.1
作者網站：http://tobia.github.com/Pause/
套件網址：N/A
發佈日期：2010-06-13
檔案大小：2.44 KB
檔案下載：jquery.pause.js

參數說明：

檢視原始碼 JavaScript
1

無

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5

// 暫停動畫
$(selector).pause();
 
// 恢復動畫
$(selector).resume();

使用範例：

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pause.js"></script>
<style type="text/css">
	div.demo {
		border: 1px solid #555;
		width: 550px;
	}
	#box1, #box2, #box3 {
		width: 100px;
		height: 100px;
		position: relative;
	}
	#box1 {
		background: #0C0;
	}
	#box2 {
		background: #090;
	}
	#box3 {
		background: #060;
	}
</style>
<script type="text/javascript">
	$(function() {
		// 設定動畫
		function setupBox(i){
			var $box = $('#box' + i);
			// 移動到 left : 450
			// 動畫完成後再接著 phase2
			function phase1(){
				$box.animate({
					left: 450
				}, 2000, phase2);
			}
 
			// 移動到 left : 0
			// 動畫完成後再接著 phase1
			function phase2(){
				$box.animate({
					left: 0
				}, 2000, phase1);
			}
 
			// 當滑鼠移到區塊上時暫停動畫
			// 移出後恢復動畫
			$box.hover(function(){
				$box.pause();
			}, function(){
				$box.resume();
			});
 
			phase1();
		}
 
		setupBox(1);
		setupBox(2);
		setupBox(3);
	});
</script>
 
<body>
	<div class="demo">
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
	</div>
</body>
範例 1

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

1 筆針對 [jQ]Pause jQuery plugin 0.1 的迴響

發表迴響