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/meEeAt/

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