fadeOut first 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