javascript - javascript中三个div的淡入和淡出循环

Question

我用过这个 http://jsfiddle.net/3KydB/并尝试将其修改为 3 个 div:

window.switchIn = function () {
    $('.chart_1').fadeToggle(function() {
        $('.chart_2').fadeToggle(function() {
            $('.chart_3').fadeToggle(function() {
                setTimeout(function() {window.switchOut();}, 6000);
            });
         });
    });

}

window.switchOut = function () {
  $('.chart_3').fadeToggle(function() {  
    $('.chart_2').fadeToggle(function() {
        $('.chart_1').fadeToggle(function() {
            setTimeout(function() {window.switchIn();}, 6000);
        });
      });  

    });

}

setTimeout(function() {window.switchIn();}, 6000)

第一个淡入淡出效果很好，然后第二个淡入，第三个淡入其下，然后回到第一个，依此类推。

Answer 1

我认为您会想要如下所示的内容:http://jsfiddle.net/mEeAt/

window.switch1 = function () {
    $('.chart_3').fadeToggle(function() {
        $('.chart_1').fadeToggle(function() {
            setTimeout(window.switch2, 6000);
        });
    });

}

window.switch2 = function () {
    $('.chart_1').fadeToggle(function() {
        $('.chart_2').fadeToggle(function() {
            setTimeout(window.switch3, 6000);
        });
    });
}

window.switch3 = function () {
    $('.chart_2').fadeToggle(function() {
        $('.chart_3').fadeToggle(function() {
            setTimeout(window.switch1, 6000);
        });
    });
}

setTimeout(window.switch2, 6000)

因此每个函数负责淡出事件元素，淡入下一个元素，并为循环中的下一个函数设置超时。

当然，这里有很多重复的代码，因此您最好创建一个函数来使其更通用:http://jsfiddle.net/mEeAt/1/

function cycle(delay) {
    var elements = Array.prototype.slice.call(arguments, 1);
    var functions = [];
    for (var i = 0; i < elements.length; i++) {
        functions.push(function (i) {
            var prev = i === 0 ? elements.length - 1 : i - 1;
            var next = (i + 1) % elements.length;
            return function() {
                elements[prev].fadeToggle(function() {
                    elements[i].fadeToggle(function() {
                        setTimeout(functions[next], delay);
                    });
                });
            };
        }(i));
    }
    functions[1]();  // start cycle by fading in the second element
}
cycle(6000, $('.chart_1'), $('.chart_2'), $('.chart_3'));