用jquery延迟改变背景位置答案

【问题标题】：change background position with jquery with delay用jquery延迟改变背景位置
【发布时间】：2012-02-19 14:28:36
【问题描述】：

我有一个在 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);
}

有什么建议吗？

【问题讨论】：

您是否检查过变量的拼写。另外，将 -ve 符号移到括号中。看看它是否有效。
请注意，您的动画只需要 0 毫秒。这没什么。
不知道这是否是您的实际代码，但您拼错了“height”的第二个实例。
@Tim 我不想让动画花时间，所以我加了 0ms，但是它应该延迟一段时间，这就是我使用延迟功能的原因。
如果您不希望动画渲染（即您希望背景跳转到新位置）然后使用 setInterval 和 $('#char').css({ 'background -position' 等 });...

标签： jquery

【解决方案1】：

我不相信你可以用 jQuery 动画 background-position（至少，不能没有像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);

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

【讨论】：

您可以使用 jquery 为任何 css 属性设置动画，animate() 函数将 CSS 属性及其值作为第一个参数。
请参阅stackoverflow.com/questions/5171080/…（第二个答案）以获取可能的解决方案...

【解决方案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);

【讨论】：

我设置了一个稍作修改的jsfiddle here来演示。
是的，就是这个，jsfiddle FTW！