我需要淡入淡出 3 div [关闭]答案

【问题标题】：I need to fadein fadeout 3 divs [closed]我需要淡入淡出 3 div [关闭]
【发布时间】：2013-12-10 17:40:40
【问题描述】：

我是 Jquery 的新手，我正在尝试淡入和淡出 3 个 div。它需要保持循环，我无法让它工作。

这是我的 html 标记：

<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>

有什么帮助吗？

【问题讨论】：

请贴出您已经尝试过但无法开始工作的 jQuery 代码。
$('#section1,#section2,#section3').fadeIn() 不工作？

标签： javascript jquery

【解决方案1】：

我会为所有 div 添加一个公共类并将它们包装在一个 div 中。

试试：

var len = $("#container").find(".section").length;
setInterval(function(){
    var current = $(".section:visible");
    var active = $(current).index();
    var next;
    if(active == len-1){
        next = 0;
    }
    else{
        next = active+1;
    }
    $(current).hide();
    $("#container .section:eq("+next+")").fadeIn();
},1000);

DEMO here.

【讨论】：

完美，正是我需要的！！！
有一个问题...当页面加载时，第一个 div 保持“隐藏”状态，1 秒后第一个 div 出现并且幻灯片开始...我猜那是因为它等待 1 秒更改显示：第一个 div 都没有...我该如何解决？！
@user1541940 可能正在等待 DOM 准备就绪。 See here 给定超时 10 秒。编辑答案。
是的，它在您的演示中效果很好...看看我的：bit.ly/1d6UrnZ

【解决方案2】：

这是一个jsfiddle 显示你想要什么（我认为）。 Html 就是你展示的。

JavaScript：

(function ($) {
    function fadeOut(div, sel) {
        var next;
        next = div.next(sel);
        next = next.length ? next : $(sel + ':first');
        return function () {
            div.fadeTo(2000, 0, fadeIn(next, sel));
        }
    }

    function fadeIn(div, sel) {
        return function () {
            div.fadeTo(2000, 1, fadeOut(div, sel));
        }
    }
    $.fn.fadeInNOut = function (sel) {
        $(this).find(sel + ':first').fadeTo(0, 1);
        fadeOut($(sel + ':first'), sel)();
        return this;
    };
}(jQuery));
$('body').fadeInNOut('div');

CSS（看看发生了什么）：

div {
    position : absolute;
    top : 0;
    left : 0;
    opacity : 0;
    border : 1px solid rgb(0, 0, 0);
    color : rgb(255,255,255);
    display : inline;
    font-size : 50px;
    float : left;
    height : 150px;
    line-height : 150px;
    margin : 10px;
    text-align : center;
    width : 200px;
}
#section1 {
    background : rgb(255,0,0);
}
#section2 {
    background : rgb(0,255,0);
}
#section3 {
    background : rgb(0,0,255);
}

【讨论】：

嘿，感谢您的帮助，但我需要一个接一个地淡入/淡出......就像幻灯片一样！ :D
啊...我明白了。编辑并更新了小提琴和答案。将解决方案封装在一个小 jQuery 插件中，以防您想在页面上放一些它们。

【解决方案3】：

你想做这样的事情吗？ http://jsfiddle.net/p8hRR/4/

$(function() {
    var divs = [$('#section1'), $('#section2'), $('#section3')];

    fadeInFadeOut(divs);

    function fadeInFadeOut(divs) {
        var helper = function(methodToCall) {
            var i = 0;
            var processing = setInterval(function() {
                $(divs[i++])[methodToCall]("slow");
                if (i == divs.length) {
                    clearInterval(processing);
                    if (methodToCall !== "fadeOut") {
                        helper("fadeOut");
                    }
                }
            },250);
        };
        helper("fadeIn");
    }
});

【讨论】：

不，我需要一个接一个地淡入 div...而不是同时...但是感谢您的帮助！