用背景圖像從右至左動畫一個div

我有一個div，它基本上只是透過圖像的特定部分作爲其背景圖像的遮罩。用背景圖像從右至左動畫一個div

背景圖像對齊到右側。我試圖從右到左動畫backgroundPosition，但動畫會自動將背景位置重置爲左側（或者非常接近左側 - 我無法完全弄清楚位置來自哪裏）。

有什麼辦法可以解決這個問題嗎？

示例代碼：http://jsfiddle.net/QRkLr/
（請注意，當動畫觸發時，背景圖像與右側不完全對齊）。

來源

2012-02-20 kylex

你可以爲背景的靜態位置，並沒有改變它時，DIV移動 – Mikhail 2012-02-20 18:34:30

@Mikhail我不太清楚你的意思。我將如何應用？ – kylex 2012-02-20 18:38:12

@kylex你能深入解釋一下你希望達到的目標嗎？你是否希望讓面具向左走，直到它不再被看到？ – Wasbazi 2012-02-20 18:43:29

你的面具的初始X位置必須是一個數字，而不是「正確的」。如果我沒有弄錯，則從左邊計算分配給background-position的任何數字（百分比或像素）。

所以我的修補程序：保持CSS：background-position: top right;，但隨後的動畫之前，計算從左邊所需的初始x位置，然後動畫回到0（左）：

$("#image").css({backgroundPositionX: -large_left_border}) 
    .animate({backgroundPositionX: 0}, 1500);

見fiddle

編輯

底線：background-position-x沒有Firefox支持和.animate()僅適用於數字CSS屬性（所以它ð因爲它不是一個單一的數字，所以它沒有在background-position上工作），所以沒有標準的jquery方法來實現這一點。

然而，正如@thirtydot指出here，有實現上background-position動畫插件：http://www.protofunc.com/scripts/jquery/backgroundPosition/

來源

2012-02-20 19:10:34 ori

這不會在FireFox中爲背景設置動畫。 – kylex 2012-02-20 20:25:54

我想[你是對的]（http://snook.ca/archives/html_and_css/background-position-x-y），firefox不支持backgroundPositionX。 'animate'方法只適用於數字CSS屬性。看起來像死衚衕。 – ori 2012-02-20 21:20:03

用背景圖像從右至左動畫一個div

回答

相關問題