用jQuery改變背景位置

我有一個div背景中使用的精靈圖像，我想在每1秒後改變它的位置。用jQuery改變背景位置

我嘗試下面的代碼，但它不工作：

var speed = 1000; 
var height = 50; 
for (var i=0; i<dummyArray.length; i++) { 
    $("#char").delay(speed).animate({'background-position': '0 ' + -(heigth*i) +'px'}, 0); 
}

任何建議嗎？

來源

2012-01-26 Alok Jain

你檢查你的變量的拼寫。另外，將-ve標誌移動到支架中。看看它是否有效。 –

請注意，您的動畫只需要0ms。這沒什麼。 – Tim

不知道這是否是您的實際代碼，但您拼錯了第二個「高度」實例。 – magicalex

我不相信你可以動畫與jQuery的背景位置（至少，不是沒有插件如http://www.protofunc.com/scripts/jquery/backgroundPosition/）;你可以使用的setInterval方法：

var height = 50; 
var i = 0; 
var speed = 1000; 

setInterval(function(){ 
    i++; 
    if(i > dummyArray.length){ 
     i = 0; 
    } 
    $("#char").css({'background-position' : '0 ' + (i*height) + 'px' }); 
}, speed);

注意，這將導致後臺位置跳而不是動畫順利...

來源

2012-01-26 13:58:17 MassivePenguin

您可以使用jquery動畫任何CSS屬性，animate（）函數將CSS屬性和它的值作爲第一個參數。 –

請參閱http://stackoverflow.com/questions/5171080/jquery-animate-background-position（第二個答案）爲一個可能的解決方案... – MassivePenguin

你確定你想要做的，從內爲循環？最終會有多個動畫事件綁定到幾乎同時觸發的元素上。您可能需要使用setInterval或setTimeout代替：

var counter = 1; 
var height = 50; 

var newInt = setInterval(function(){ 
    $("#char").animate({'background-position': -(height*counter) +'px'}); 
    counter++; 
}, 1000);

然後明確的是，間隔和阻止你將使用動畫：

clearInterval(newInt);

來源

2012-01-26 14:01:33

我已經設置了一個稍微修改[jsfiddle here]（http：// jsfiddle.net/D3SnY/）來演示。 – magicalex

是的，jsfiddle FTW！ –

用jQuery改變背景位置

回答

相關問題