Home » jQuery 技巧

[jQ]Background-Position Animation 在 jQuery 1.6 上的問題

[ 日期： | 瀏覽：13,254 | 迴響：2 ]

如果各位有看過翻選式選單範例的話，就知道雖然 jQuery 本身是不支援背景圖片的動畫，但只要咱們引用 Background-Position Animation Plugin 就能輕輕鬆鬆做出背景圖片的動畫效果囉。

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

<!-- 這邊是使用 jQuery 1.5 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- 記得引用 jquery.backgroundPosition.js -->
<script type="text/javascript" src="jquery.backgroundPosition.js"></script>
<style type="text/css">
	div {
		width: 90px;
		height: 90px;
		padding: 5px;
		background: url(bg.png) no-repeat 0 -100px;
	}
</style>
<script type="text/javascript">
	$(function() {
		$('div').hover(function(){
			$(this).stop().animate({
				backgroundPosition: "0 0"
			});
		}, function(){
			$(this).stop().animate({
				backgroundPosition: "0 -100px"
			});
		});
	});
</script>
 
<body>
	<h3>jQuery 1.6(以下版本) + jquery.backgroundPosition.js</h3>
	<div>hover me</div>
</body>



但若是把 jQuery 更新到 1.6 版本時，你會發覺到沒任何錯誤但也沒任何反應。

筆者稍微比對了使用 1.5 跟 1.6 的差別，發現在新版的 fx 中少了很多屬性，像是 1.6 中就有沒 fx.options.curAnim，但在 Background-Position Animation Plugin 程式中的第 57 行又要取得該物件的屬性值，因此就有問題囉：

檢視原始碼 JavaScript
1

var end = toArray(fx.options.curAnim.backgroundPosition);



雖然筆者不知道是原外掛作者用到沒有公開的屬性還是 jQuery 本身的改變所引起的，但要修正的話，只要把原本的第 57 行修改一下：

檢視原始碼 JavaScript
1
2

//var end = toArray(fx.options.curAnim.backgroundPosition);
var end = toArray(fx.options.curAnim == undefined ? fx.end : fx.options.curAnim.backgroundPosition);

這樣不管是在新舊版的 jQuery 中都能正常執行囉！

範例 1 範例 2 範例 3

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

2 筆針對 [jQ]Background-Position Animation 在 jQuery 1.6 上的問題 的迴響

  1. 前幾天在 jQuery 1.6 試過(舊版不知道)，要改 position 時，分別指定 x、y 軸位置可以產生動畫效果。所以這個插件已經不須要了。(技術真的進步很快？)

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

    $('div').hover(function(){
		$(this).stop().animate({
			 'background-position-x': '10%',
			 'background-position-y': '20%'
		});
	}, function(){
		$(this).stop().animate({
			 'background-position-x': '0%',
			 'background-position-y': '0%'
		});
});

    • 這用法本來就有, 但不是每個瀏覽器都支援 background-position-x 等寫法的, 像是 Firefox 及 Opera 就不行哩。

發表迴響