0

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

我有多个 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;}

提前谢谢你，链接在下面。

动态改变 DIV jsfiddle

4

3 回答 3

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/

于 2013-06-26T20:13:57.420 回答
0

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

Here's a Fiddle您可以使用关键的停止、时间和颜色来获得您需要的效果。

于 2013-06-26T20:13:08.100 回答
0

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

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/

于 2013-06-26T20:20:06.540 回答