jquery - 淡出第一个 div，然后淡入第二个 div

Question

遇到一个问题，我需要做一些类似淡入淡出横幅的事情 - 一个 div 淡出，然后第二个 div 淡入，代码如下:

$(document).ready(function() {
    setTimeout(function() {
        $('#zeus').fadeOut(1000);
     }, 5000);
    $('#zeuss').hide();
    setTimeout(function(){
        $('#zeuss').fadeIn(1000);
    }, 6000);
});

它可以工作，但是在#zeuss淡入之后它就停留在这里。我需要反复这样做。并且请不要提供使用 .delay() 因为我使用的是 jquery 1.3.2

编辑。默认情况下 #zeus 显示在页面上，我想将其淡出，然后淡入 #zeuss，然后再次淡入 #zeus 并然后淡出#zeus并淡入#zeuss等..

Answer 1

通常情况下，通用且可扩展的解决方案会更简单:

更新:采纳了 jfriend00 的建议，从多个计时器改为完成函数，以防止随着时间的推移出现累积错误。

/**
 * Fade-cycles elements with class 'banner'
 */
$(document).ready(function() {

    var delay = 3000, fade = 1000; // tweak-able
    var banners = $('.banner');
    var len = banners.length;
    var i = 0;

    setTimeout(cycle, delay); // <-- start

    function cycle() {
        $(banners[i%len]).fadeOut(fade, function() {
            $(banners[++i%len]).fadeIn(fade, function() { // mod ftw
                setTimeout(cycle, delay);
            });
        });
    }

});

• DEMO使用 jQuery 1.3.2