Question

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

我有多个div内容，应该动态淡出。我有这个jsfiddle并使它适用于2个div，但需要它可以用于多个，例如5个不同的DIV。

这个jsfiddle是最好的方式还是有更好的选择。这是代码。这是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;}

提前感谢您，链接如下。

Dynamically changing 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/

动态改变DIv

3 个答案: