jquery - 使循环的 div 背景淡入不同的颜色

Question

我试图让 div 的背景颜色连续改变 4 或 5 次，但真的不知道从哪里开始。我需要非常精确的计时，因为我还必须同时在背景颜色上淡化图像。

最好的方法是什么？ jQuery 还是 CSS？

谢谢

编辑 我已经能够使用 CSS 动画和关键帧使背景属性改变颜色，如下所示:

<div class="fading"></div>

.fading {
    height:200px;
    width:100%;
    background: black;
    animation: fading 30s infinite;
    -webkit-animation: fading 30s infinite;
    border-radius:5px;
}
@keyframes fading {
    0%   { background: black; }
    33%  { background: red; }
    66%  { background: blue; }
    100% { background: black; }
}

@-webkit-keyframes fading {
    0%   { background: black; }
    33%  { background: red; }
    66%  { background: blue; }
    100% { background: black; }
}

但是我不确定这是否会与 jquery 保持相同的时间，jquery 将用于淡入和淡出图像？

我还担心旧浏览器上会发生什么情况，我应该考虑使用任何故障保险吗？

Answer 1

时间安排应保持不变。这里我包含了没有 jQuery 的淡入淡出图像。考虑到代码，我认为您确实不需要帮助来完成此操作，但为了回答这个问题，为了让它也适用于较旧的浏览器，jQuery 可能是一个更好的选择。

演示 http://jsfiddle.net/dP8fL/1/ (时间更改为 10 秒，以减少检查是否有效的等待时间)

<div class="fading">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTl7V8rHy90EMd_IYWwbiucARcCPDHnwBkoB7T3ZJjDdqauT-j3eQ" />
</div>

CSS

.fading {
    height:200px;
    width:100%;
    background: black;
    animation: fading 30s infinite;
    -webkit-animation: fading 30s infinite;
    border-radius:5px;
}
.fading img{
    width:100px;
    animation: opacityfading 30s infinite;
    -webkit-animation: opacityfading 30s infinite;
    margin:30px;
}
@keyframes fading {
    0%   { background: black; }
    33%  { background: red; }
    66%  { background: blue; }
    100% { background: black; }
}

@-webkit-keyframes fading {
    0%   { background: black; }
    33%  { background: red; }
    66%  { background: blue; }
    100% { background: black; }
}
@keyframes opacityfading {
    0%   { opacity: 0; }
    33%  { opacity: 1; }
    66%  { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes opacityfading {
    0%   { opacity: 0; }
    33%  { opacity: 1; }
    66%  { opacity: 0; }
    100% { opacity: 1; }
}