Question

我是Jquery的新手，我正试图淡化和淡出3个div。它需要保持循环，我无法让它发挥作用。

这是我的html标记：

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

任何帮助？

Answer 1

你想做这样的事吗？ 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");
    }
});

Answer 2

我会为所有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.

Answer 3

这是一个显示你想要的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);
}

我需要淡出淡出3个div

3 个答案: