在多个 div 之间自动淡入淡出/显示答案

【问题标题】：Auto fade/show between multiple divs在多个 div 之间自动淡入淡出/显示
【发布时间】：2013-04-09 13:53:12
【问题描述】：

我可以在我的网页上加载一个简单的 jQuery 脚本，它会在三个“盒子”div 的每一个之间自动淡入淡出并重复？我希望它显示一个 div 5 秒，同时隐藏另外两个，然后运行 1 秒淡入淡出过渡到下一个。

三个 div 当前堆叠在一起。

<div class="boxes">

<div class="box1">text1</div>
<div class="box2">text2</div>
<div class="box3">text3</div>

</div>

【问题讨论】：

关键是使用position、z-index、display和setInterval函数的样式属性。

标签： javascript jquery

【解决方案1】：

你可以试试这个：

$(document).ready(function () {
    var allBoxes = $("div.boxes").children("div");
    transitionBox(null, allBoxes.first());
});

function transitionBox(from, to) {
    function next() {
        var nextTo;
        if (to.is(":last-child")) {
            nextTo = to.closest(".boxes").children("div").first();
        } else {
            nextTo = to.next();
        }
        to.fadeIn(500, function () {
            setTimeout(function () {
                transitionBox(to, nextTo);
            }, 5000);
        });
    }

    if (from) {
        from.fadeOut(500, next);
    } else {
        next();
    }
}

演示： http://jsfiddle.net/CYJLA/

我确信它可以被清理和/或更高效，但我只是把它放在一起让它工作。

【讨论】：

这几乎是完美的！ :) 但是，第一次转换似乎要等待 15 秒，然后每次转换需要 5 秒。我想知道是什么在开始时给了它额外的 10 秒。嗯嗯。
@copyflake 谢谢！嗯，我没有/没有看到这种情况发生。你在小提琴中看到这种情况吗？对我来说，它立即在第一个中消失，然后在 5 秒后在下一个中消失，在 5 秒后在下一个中消失，然后在 5 秒后重新开始。
你是对的。这一定是我的事情，jsfiddle工作正常！我会玩弄它的：）非常感谢。
@copyflake 哈哈好吧，如果您需要更多帮助集成它，请告诉我。不过没问题:)

【解决方案2】：

jQuery Cycle 易于设置，可以满足您的要求。

这是一个例子： http://jsfiddle.net/n1ck/4PvU7/

$('.boxes').cycle({
    speed: 1000, // speed of the transition
    timeout: 5000 // milliseconds between slide transitions (0 to disable auto advance) 
});

【讨论】：

我认为该插件会在目标 div 中查找 img 标记并循环它。我认为 OP 无法修改它以满足他/她的需要。
它不只是循环图像，如介绍中所述：Each child element of the container becomes a "slide". 请参阅我的示例。
哦，好的。没关系。我曾经经常使用它，在那些日子里，它曾经像我在评论中提到的那样工作。

【解决方案3】：

http://jsfiddle.net/Bouillou/UQTY2/52/

<div class="boxes">
    <div class="fade-effect box1">text1</div>
    <div class="fade-effect box2">text2</div>
    <div class="fade-effect box3">text3</div>
</div>

jQuery.fn.nextOrFirst = function (selector) {
    var next = this.next(selector);
    return (next.length) ? next : this.prevAll(selector).last();
}

$(document).ready(function () {
    $('div.fade-effect').fadeOut(500);

    var fadeInTime = 1000;
    var intervaltime = 5000;

    //First call
    setTimeout(function () {
        fadeMe($('div.fade-effect').first());
    }, intervaltime);

    function fadeMe(div) {
        div.fadeIn(fadeInTime, function () {
            div.fadeOut(fadeInTime);

            //Recursive call
            setTimeout(function () {
                fadeMe(div.nextOrFirst());
            }, intervaltime);
        });
    }
});

【讨论】：

【解决方案4】：

    <!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    $(".box2,.box3").css("display","none");
    var a=2;
    function recursive()
    {

    $(".box1,.box2,.box3").css("display","none");  
    $(".box"+a).fadeIn(1000);

    a=Number(a)+1; 
    if(a==4)
    a=1;
    }

    setInterval(function(){recursive()},5000);

    });
    </script>
    </head>
    <body>


    <div class="boxes">

    <div class="box1" c>text1</div>
    <div class="box2">text2</div>
    <div class="box3">text3</div>

    </div>

    </body>
    </html>

【讨论】：

当我尝试这个时，它最初显示box1，但5秒后，一切都消失了，第二个和第三个box也没有出现。只是空白。

【解决方案5】：

这是最简单的解决方案之一：

CSS：

.boxes { position:relative; height:332px; width:500px; }
.boxes div { position:absolute; left:0; top:0; }

jQuery:

$('.boxes div:gt(0)').hide();
setInterval(function(){
    $('.boxes :first-child').fadeOut().next('div').fadeIn().end().appendTo('.boxes');
}, 3000);

Working Demo

【讨论】：