Javascript 我需要淡出3个音

我刚开始做Jquery，我正在尝试fadein和fadeout 3个div。 它需要保持循环，我不能让它工作

这是我的html标记：

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

---

有什么帮助吗？

你想这样做吗

---

我将向所有div添加一个公共类，并将它们包装在一个div中

尝试：

我想这是你想要的。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);
}

---

请发布您已经尝试过的jQuery代码，但您无法使用。$'section1，section2，section3'。fadeIn不起作用了？太好了，正是我需要的！！！有一个问题…当页面加载时，第一个div保持隐藏状态，1秒后第一个div出现，幻灯片开始…我想这是因为它等待1秒来更改显示：没有第一个div…我如何修复它@用户1541940可能正在等待DOM就绪。给定10秒的超时时间。编辑后的答案。是的，它在你的演示中效果很好…看看我的：不，我需要一个接一个地淡入一个div…不是同时全部淡入…但是谢谢你的帮助！嘿，谢谢你的帮助，但我需要一个接一个地淡出……像幻灯片一样的东西！：大。。。我明白了。编辑并更新了小提琴和答案。将解决方案封装在一个小jQuery插件中，以防您想在页面上添加一些jQuery插件。

(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');

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