用jquery延迟改变背景位置

Posted 2023-05-08

【中文标题】用jquery延迟改变背景位置

【英文标题】：change background position with jquery with delay

【发布时间】：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' 等 );...

【参考方案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 属性及其值作为第一个参数。

请参阅***.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！