Javascript 使用淡入淡出更改背景图像

如何使我的内联样式div在5秒后更改其背景图像url

例如：

5秒后，需要：

5秒后，它需要：

---

因此，它可以在这个foobar中循环3个图像，红色、蓝色和黄色背景图像。

我想知道这是否是您要找的

我有3种不同的背景色淡色。使用CSS关键帧

HTML

<div class="box"> </div>

看到它在工作

---

如果您需要有关CSS关键帧动画的更多信息，请查看此链接：

您需要执行以下操作：

创建一个超时，该超时将在特定延迟后运行，并执行一些任务

您必须使用

fadeOut

和

fadeIn

来获得反弹效果

您必须重置类并添加相应的类。这需要在

fadeOut

之后和

fadeIn

之前完成

样品

var计数=1；
var class_list=[“红色”、“蓝色”、“绿色”]；
函数animateDiv（）{
$（“#内容”）.fadeOut（400，updateClass）；
}
函数updateClass（）{
$（“#content”）.removeClass（“红蓝绿”）.addClass（class_list[count++%class_list.length]）.fadeIn（400）；
}
函数initInterval（）{
设置间隔（animateDiv，2000年）；
}
$（文档）.ready（函数（）{
initInterval（）；
})

.red{
背景：红色；
}
蓝先生{
背景：蓝色；
}
格林先生{
背景：绿色；
}
div{
宽度：100px；
高度：100px；
}

它会像循环一样重复图像还是只显示一次？？提示：您可以使用

setInterval

来实现这一点。在加载body标记时调用函数。例如：-``@Andrew我正在研究fiddle，但即使是使用简单示例的类也不行。@GauravAggarwal是的，它会看到这些链接，可能会帮助您：和

@keyframes colorbox {
  0% {
    background:red;
  }
  40% {
    background: green;
  }
  80% {
    background: blue;
  }
  100% {
    background: red;
  }
}

.box {
   width:200px;
   height:200px;
   animation: colorbox 5s infinite ease-in-out;
}