用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改变背景位置

回答

相关问题