用淡入淡出改变背景图像

Question

如何让我的内联样式div在5秒后更改背景图片网址？

示例：

<div class="foobar" style=" background(url'red.png'; "> </div>

5秒后，需要：

<div class="foobar" style=" background(url'blue.png'; "> </div>

5秒后，需要：

<div class="foobar" style=" background(url'yellow.png'; "> </div>

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

Answer 1

我想知道这是不是你要找的？

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

<强> HTML

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

<强> CSS

@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;
}

看到它正常工作

JSFIDDLE

如果您需要有关CSS Keyframe动画的更多信息，请查看此链接：https://css-tricks.com/snippets/css/keyframe-animation-syntax/

Answer 2

您需要做以下事情：

1. 创建在特定延迟后执行的超时并执行某项任务
2. 您必须使用fadeOut和fadeIn来获得跳出效果。
3. 您必须重置类并添加相应的类。这需要在fadeOut之后和fadeIn之前完成。

示例

JSFiddle

＆＃13;
＆＃13;
var count = 1;
var class_list = ["red", "blue", "green"];
function animateDiv(){
	$("#content").fadeOut(400,updateClass);
}

function updateClass(){
	$("#content").removeClass("red blue green").addClass(class_list[count++ % class_list.length]).fadeIn(400);
}

function initInterval(){
	setInterval(animateDiv, 2000);
}

$(document).ready(function(){
	initInterval();
})
＆＃13;
.red{
  background: red;
}
.blue{
  background:blue;
}
.green{
  background: green;
}
div{
  width: 100px;
  height:100px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="content" class="red"></div>
＆＃13;
＆＃13;
＆＃13;

注意：您必须将fadeIn代码作为回调传递，以便在fadeOut完成后执行。

参考

• FadeIn
• FadeOut