動畫與多個背景圖像

我想爲我的多個背景圖像創建一些動畫。動畫與多個背景圖像

我有這樣的CSS代碼：

header { 
background-image: url('/img/cloud2.png'), url('/img/cloud3.png'), url('/img/cloud1.png'), url('/img/cloud4.png'); 
background-position: left bottom, 20% 40%, 40% bottom, right 85%; 
background-repeat: no-repeat; 
}

我只是想在一個無限循環中移動的雲。這裏是我的JavaScript代碼：

$('header').animate({ 
    'background-position-x': '10%, 3%, 5%, 7%' 
    }, 500, 'linear');

問題是，這是行不通的。它只適用於我只寫一個background-position-x值。但在這種情況下，所有的雲從相同的x值開始。

來源

2012-09-26 anpa

看來你在使用在css和你正在使用的jQuery中background-position-x。爲什麼不嘗試將background-position重置爲您想要使用jquery的值？

來源

2012-09-26 03:14:33 weexpectedTHIS

感謝您的提示。雖然，當我嘗試用jquery重置背景位置時，像這樣：'$（'header'）。animate（{'background-position'：'right bottom，70％70％，80％80％，90％90 ％'}，500，'linear'）;'所有的背景圖片都會前進到所提到的第一個位置（右下角）。我想要做的是將每個背景圖像移動到不同的位置...... – anpa

你可以用你的確切問題創建一個jsfiddle，然後我可以幫你嗎？ http://jsfiddle.net/ – weexpectedTHIS

對，對不起！ :)它在這裏[鏈接]（http://jsfiddle.net/TqtPt/1/），雖然它不動（我不知道爲什麼...）。我想要做的是將每個雲移動到不同的位置...... – anpa

動畫與多個背景圖像

回答

相關問題