如何让我的内联样式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个图像。
答案 0 :(得分:2)
我想知道这是不是你要找的?
我对背景颜色有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;
}
看到它正常工作
如果您需要有关CSS Keyframe动画的更多信息,请查看此链接:https://css-tricks.com/snippets/css/keyframe-animation-syntax/
答案 1 :(得分:0)
您需要做以下事情:
fadeOut
和fadeIn
来获得跳出效果。fadeOut
之后和fadeIn
之前完成。
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;
注意:您必须将fadeIn
代码作为回调传递,以便在fadeOut
完成后执行。