Question

我在div的背景中使用了精灵图像，我希望每1秒后改变它的位置。

我尝试了以下代码，但它无效：

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);
}

有什么建议吗？

Answer 1

我不相信你可以用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);

请注意，这会导致背景位置跳而不是平滑动画......

Answer 2

您确定要在for循环中执行此操作吗？最终会有多个动画事件绑定到几乎同时触发的元素。您可能希望改为使用setInterval或setTimeout：

var counter = 1;
var height = 50;

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

然后清除该间隔并停止使用的动画：

clearInterval(newInt);

用延迟改变jquery的背景位置

2 个答案: