Home » jQuery 技巧

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

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

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.51.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 就不行哩。

發表迴響