jQuery 1.6：backgroundPosition vs backgroundPositionX和FF4兼容

在嘗試升級jQuery插件'iCheckbox'（http://stackoverflow.com/questions/6032538/）以在jQuery 1.4.4之上工作時，我發現使用的jQuery 1.6：backgroundPosition vs backgroundPositionX和FF4兼容

animate({backgroundPosition:'10px 0px'})

需要被改變以

animate({backgroundPositionX: '10px', backgroundPositionY: '0px'})

作爲唯一屬性與一個參數應該被使用。到目前爲止，這是有道理的，但等待..雖然它在Safari和Chrome工作正常，它不工作在FF4（所有在Mac）..

所以我試了這個，並最終發現，如果我改變它到

animate({backgroundPosition: '10px'})

它無處不在！但是這裏發生了什麼？現在我只給出一個參數，它的工作原理，但我沒有指定它是用於X還是Y軸（所以它默認爲X軸似乎..但是如果我想讓它在Y軸上工作？）

這似乎很奇怪，我的解決方案不能是這樣做的正確方式..所以我需要一些建議：

發生了什麼事？

應該如何使用jQuery 1.4 - 1.6來動畫背景位置，以便它可以跨瀏覽器使用？

來源

2011-06-12 mikkelbreum

如果你喜歡它，請儘快檢查按鈕的作品和幻燈片在IE7,8,9和答案在這裏評論？測試：http://jsfiddle.net/mikkelbreum/uHkE5/ – mikkelbreum 2011-06-12 14:29:54

首先，jQuery是無法在動畫兩個值同時，因此您看到輸入backgroundPosition的兩個值完全不起作用。另請注意，對於px的值，JQuery documentation鼓勵您而不是編寫px。

其次，backgroundPositionX和backgroundPositionY只在幾個瀏覽器中，最值得注意的是IE和WebKit的最近，這就是爲什麼你會發現它並不在FF或Opera的工作支持非標準 CSS屬性。（See here。）

我發現混合JQuery的animate和CSS轉換可以在大多數瀏覽器中爲一個軸上的背景圖像製作動畫。我會從我的回答引用了另一個問題（jQuery.animate background-position）：

使用jQuery的.animate()和backgroundPositionX和Y分別爲 IE（這將與最新的JQuery的工作）。然後在 support CSS transitions（幾乎除IE之外的所有內容）的瀏覽器中，使用 .css()而不是.animate()更改背景位置並在樣式表中設置 CSS過渡。

你會覆蓋大多數瀏覽器與上述，但它可能不是AS 兼容，因爲只使用一個插件。看到它在這裏工作： http://jsfiddle.net/lucylou/dVpjh/

來源

2011-11-17 22:45:37

據： http://www.w3schools.com/css/pr_background-position.asp

「如果你只給出一個值，另一個值將是50％，你可以混合％和立場」

來源

2011-06-12 14:17:18 mikeycgto

jQuery 1.6：backgroundPosition vs backgroundPositionX和FF​​4兼容

回答

相關問題

jQuery 1.6：backgroundPosition vs backgroundPositionX和FF4兼容