如果各位有看過翻選式選單範例的話,就知道雖然 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 中都能正常執行囉!
前幾天在 jQuery 1.6 試過(舊版不知道),要改 position 時,分別指定 x、y 軸位置可以產生動畫效果。所以這個插件已經不須要了。(技術真的進步很快?)
這用法本來就有, 但不是每個瀏覽器都支援 background-position-x 等寫法的, 像是 Firefox 及 Opera 就不行哩。