jQuery背景位置在FireFox中不起作用？

可能重複：
jquery.animate background-position doesn't work jQuery背景位置在FireFox中不起作用？

我有一個小腳本，動畫背景的位置，遺憾的是它不工作在Firefox。
它適用於IE和Chrome。

$('#background').animate({ 
    'background-position-x': -1020 
});

爲什麼它在FireFox中不起作用？
在此先感謝！

來源

2012-08-28 Jay Wit

你可以嘗試一下這個http://stackoverflow.com/questions/6322347/jquery-1-6-backgroundposition-vs-backgroundpositionx-and-ff4-compatibility – Chandrakant

你總是可以創建自己的小插件，它不是硬。

使用jQuery 1.8，我們現在有機會獲得$ .Animation方法，讓我們的動畫值的情況下直接到很多工作，所以我們可以這樣做：

$.fn.animateBG = function(x, y, speed) { 
    var pos = this.css('background-position').split(' '); 
    this.x = parseInt(pos[0]) || 0; 
    this.y = parseInt(pos[1]) || 0; 
    $.Animation(this, { 
     x: x, 
     y: y 
     }, { 
     duration: speed 
     }).progress(function(e) { 
      this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px'); 
    }); 
    return this; 
}

然後使用它我們可以這樣做：

$("#background").animateBG(x-value, y-value, speed);

活生生的例子： $（「＃背景」）。animateBG（「0像素」，「-45px」，300）;

FIDDLE

免責聲明：這不是一個成品和測試插件，但是這是我花了十分鐘的jsfiddle創建，但測試出來做你需要的改變，它應該適合你。

來源

2012-08-28 14:28:59 adeneo

正如你可以在這裏閱讀：http://my.safaribooksonline.com/0130092789/ch14lev1sec7?portal=oreilly，這是一個Internet Explorer CSS特定屬性。

來源

2012-08-28 13:57:50 Silox

爲什麼它在Chrome瀏覽器？有沒有其他的方式來動畫背景位置？ –

因爲Chrome已經複製了一堆IE特定的東西（包括像window.event這樣的東西）。 –

報價https://stackoverflow.com/a/8378817/168735

背景位置-x是非標準的CSS屬性，它是不是Firefox支持。

參見：

http://snook.ca/archives/html_and_css/background-position-x-y https://stackoverflow.com/a/8175460/1011582

來源

2012-08-28 13:58:08 n00dle

火狐不支持background-position-x或background-position-y。您應該編寫一個簡單的函數來計算當前的x和y位置以及所需的位置，並使用setTimeout和$(el).css對其進行動畫處理。或者使用CSS3動畫。

P.S. 對不起，對我以前的帖子。

來源

2012-08-28 13:58:49

然後再次，動畫不接受兩個值！ – adeneo

編輯的代碼，這應該會幫助你:)在字符串中使用值 –

你甚至在發佈之前測試這些東西嗎？ – adeneo

如前所述，background-position-x和background-position-y是非標準的。

有兩個選項，你可以探索：

jQuery的背景動畫插件（例如：http://snook.ca/archives/javascript/jquery-bg-image-animations/）
CSS3過渡

來源

2012-08-28 14:08:32

插件使它在FF（如果你使用jQuery 1.7）工作。 jQuery 1.8弄糟了backgroundPosition的整個概念，它似乎:( – cartbeforehorse

jQuery背景位置在FireFox中不起作用？

回答

相關問題