动态变化DIv

Question

这是我在这里的第一篇文章。我正在寻求帮助。

我有多个div内容，它们应该动态地淡入淡出。我已经得到了这个jsfiddle，并使它适用于2个div，但需要它适用于多个，例如5个不同的div。

这是最好的方式还是有更好的选择。这是代码。这是jquery。

   var fadeinBox = $("#box2");
var fadeoutBox = $("#box1");
function fade() {
    fadeinBox.stop(true, true).fadeIn(2000);
    fadeoutBox.stop(true, true).fadeOut(2000, function() {
        // swap in/out
        var temp = fadeinBox;
        fadeinBox = fadeoutBox;
        fadeoutBox = temp;
        // start over again
        setTimeout(fade, 1000);
    });
}
// start the process
fade();

这是html

    <div id="wrapper">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
</div>

和CSS

.box {
    position: absolute;
    height: 100px;
    width: 100px;
}
#wrapper {position: relative;}
#box1 {background-color: #F00;}
#box2 {background-color: #00F;  display: none;}

提前感谢您，链接如下。

动态更改DIV jsfiddle

Answer 1

您可以使用相同的代码，但使其成为动态的，而不是两个静态元素：

var $boxes = $(".box").hide();
var current = 0;
function fade() {
    $boxes.eq(current).stop(true, true).fadeOut(2000);
    current = (current + 1) % $boxes.length;
    $boxes.eq(current).stop(true, true).fadeIn(2000, function(){
       setTimeout(fade, 1000); 
    });
}
fade();

http://jsfiddle.net/3XwZv/637/

Answer 2

如何使用CSS3动画？根据您的目标浏览器，这应该能很好地工作：

将标记简化为一个div，如下所示：

<div id="box"></div>

然后CSS处理所有动画：

@keyframes colorCycle
{
0%   {background-color:red;}
20%  {background-color:orange;}
40%  {background-color:yellow;}
60%  {background-color:green;}
80%  {background-color:blue;}
100% {background-color:purple;}
}
@-webkit-keyframes colorCycle /* Safari and Chrome */
{
0%   {background-color:red;}
20%  {background-color:orange;}
40%  {background-color:yellow;}
60%  {background-color:green;}
80%  {background-color:blue;}
100% {background-color:purple;}
}
#box {
    height: 100px;
    width: 100px;
    animation: colorCycle 10s 0s infinite;
    -webkit-animation: colorCycle 10s 0s infinite;
}

这是一个Fiddle你可以使用关键的停止，时间和颜色来获得你需要的效果。

Answer 3

根据您的特定应用程序，您可以切换所有方框的淡入淡出，并使用jQuery的promise()来确定所有方框何时完成淡入淡出。

HTML:

<div class="wrapper">
    <div class="box box1"></div>
    <div class="box box2"></div>
</div>
<div class="wrapper">
    <div class="box box1"></div>
    <div class="box box2"></div>
</div>
<div class="wrapper">
    <div class="box box1"></div>
    <div class="box box2"></div>
</div>

CSS：

.box {
    position: absolute;
    height: 100px;
    width: 100px;
}
.wrapper {
    position: relative;
    width:100px;
    height:100px;
    margin-bottom:10px;
}
.box1 {
    background-color: #F00;
}
.box2 {
    background-color: #00F;
    display: none;
}

JS:

function fade() {
    jQuery('.box').stop(true, true).fadeToggle(2000);
    jQuery('.box').promise().done(function(){fade();});
}
fade();

http://jsfiddle.net/3XwZv/638/