淡化背景图像

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关键帧动画的更多信息，请查看以下链接： https : //css-tricks.com/snippets/css/keyframe-animation-syntax/

Answer 2

您需要执行以下操作：

1. 创建将在特定延迟后运行的超时并执行一些任务
2. 您将必须使用fadeOut和fadeIn来产生反弹效果。
3. 您将必须重置班级并添加相应的班级。 这需要在fadeOut之后和fadeIn之前fadeIn 。

样品

的jsfiddle

 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(); }) 

 .red{ background: red; } .blue{ background:blue; } .green{ background: green; } div{ width: 100px; height:100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="content" class="red"></div> 

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

参考

• 淡入
• 淡出