Jquery CSS背景更改之间的延迟

我试图通过调用函数上的

setTimeout

来旋转CSS背景，但是代码没有按预期工作。只有一个过渡，然后它立即跳到最后一个图像

---

谢谢

将您的超时时间更改为不同的时间，现在它们都在同一时间（2000毫秒）结束。如果您希望每个部件为2000ms，则应使用回调函数使其成为

2000

、

4000

、

6000

、

8000

。以下是相同的描述

代码

函数更新页面（url，回调）{
var\u url=http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/';
_url+=url；
$（'#rotator'）.css（“背景图像”，“url”（“+#url+”））；
setTimeout（函数（）{
回调（）；
}, 2000);
}
var func=函数（）{
updateImage（“diamond_室内装潢.png”，
函数（）{
updateImage（“微妙的条纹.png”，
函数（）{
updateImage（“struckaxiom.png”，
函数（）{
updateImage（“dark_stripes.png”，
函数（）{}）
});
})
});
}
setTimeout（func，2000）
旋转器{
宽度：200px；
高度：200px；
显示：块；
背景图片：url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/diagmonds.png);
过渡：背景0.5s线性；
}

---

您可以不用设置太多超时，尝试以下方法：

var func = function () {
    var images = [
        'http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/diamond_upholstery.png',
        'http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/subtle_stripes.png',
        'http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/struckaxiom.png',
        'http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/dark_stripes.png'
    ]; 
    var state = $('#rotator').data('background-image-state');
    var newState = state % images.length;
    $('#rotator').data('background-image-state', newState);
    $('#rotator').css("background-image", "url("+images[newState]+")");

    setTimeout(func, 2000);

}
$('#rotator').data('background-image-state', 0);
setTimeout(func, 0);

---

您可以使用

setInterval

代替

setTimeout

：

var i=0；
var rotator=document.querySelector（“#rotator”）；
var路径http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/';
变量背景=[
“钻石装饰”，
“细微条纹”，
“struckaxiom”，
“深色条纹”
];
函数func（i）{
setInterval（函数（）{
如果（i==（backgrounds.length-1））{i=0；}其他{i++；}
rotator.style.backgroundImage='url（'+path+backgrounds[i]+'.png）；}，2000）；
}
window.onload=func（i）
旋转器{
宽度：160px；
高度：160px；
背景图像：url（'http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/diamond_upholstery.png');
}

但2000ms不意味着它在最后一条语句完成后执行2sec吗？我尝试了你的解决方案，但随着时间的推移，它产生了一些意想不到的后果：嗯，那么，是什么导致问题随着时间的推移变得不稳定呢@pufAmuf因为超时失去同步：这会修复它，但。。。最好是在CSSI中设置一个无限动画，它只是回答了为什么初始延迟不起作用。根据你的小提琴，现在第一张图像有一个延迟。真正的问题是你设置的超时没有延迟，这是导致划水的原因。啊，好吧，下次我会记住这一点。非常感谢。

var func = function () {
    var images = [
        'http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/diamond_upholstery.png',
        'http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/subtle_stripes.png',
        'http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/struckaxiom.png',
        'http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/dark_stripes.png'
    ]; 
    var state = $('#rotator').data('background-image-state');
    var newState = state % images.length;
    $('#rotator').data('background-image-state', newState);
    $('#rotator').css("background-image", "url("+images[newState]+")");

    setTimeout(func, 2000);

}
$('#rotator').data('background-image-state', 0);
setTimeout(func, 0);