Home » jQuery 外掛

[jQ]jQuery Color Animations 1.0

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



jQuery 基本上的動畫只支援數值型的屬性，所以像是背景顏色就不能拿來做動畫效果使用。不過 John Resig 另外寫了個 jQuery Color Animations 套件來讓 jQuery 動畫能擴充支援到：backgroundColor, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, color 及 outlineColor 等七個顏色屬性。

套件名稱：jQuery Color Animations
套件版本：1.0
作者網站：N/A
套件網址：http://plugins.jquery.com/project/color
發佈日期：2007-09-09
檔案大小：4.35 KB
檔案下載：jquery.color.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<style type="text/css">
	div {
		width: 200px;
		height: 100px;
		border: 4px solid black;
		margin: 10px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 當滑鼠移到 #color1 時會改變 color 值
		$('#color1').hover(function(){
			$(this).stop().animate({
				color: 'red'
			}, 1000);
		}, function(){
			$(this).stop().animate({
				color: 'black'
			}, 1000);
		});
 
		// 當滑鼠移到 #color2 時會改變 background-color 值
		$('#color2').hover(function(){
			$(this).stop().animate({
				backgroundColor: '#c99'
			}, 1000);
		}, function(){
			$(this).stop().animate({
				backgroundColor: '#fff'
			}, 1000);
		});
 
		// 當滑鼠移到 #color3 時會改變 border-bottom-color 值
		$('#color3').hover(function(){
			$(this).stop().animate({
				borderBottomColor: '#ff437f'
			}, 400);
		}, function(){
			$(this).stop().animate({
				borderBottomColor: 'black'
			}, 400);
		});
	});
</script>
 
<body>
	<div id="color1">jQuery Color Animations 1.0</div>
 
	<div id="color2"></div>
 
	<div id="color3"></div>
</body>

範例 1

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

4 筆針對 [jQ]jQuery Color Animations 1.0 的迴響

    • 這是未壓縮過的，用 YUI Compressor 壓縮後則只有 2.24 kb
      其實 jQuery UI 中的 Effect 也是有加入該外掛的

    • 暫時可以先把 jquery.color.js 中的第 12, 15 拿先註解起來
      然後把第 65 行的 jQuery.curCSS 改成 jQuery.css, 這樣應該就可以~

發表迴響