淡出第一个div然后淡入第二个div(fadeOut first div then fadeIn s

有一个问题，我需要做的是这样一个褪色的旗帜 - 一个DIV淡出然后第二个div衰落，这里的代码：

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

它的工作原理，但经过#zeuss在逐渐消退，它只是留在了这里。我需要做的是反复。请不要提供给jQuery的1.3.2使用.delay（），因为IM

编辑。 默认情况下#zeus被显示在页面上，我想淡出出来然后淡入#zeuss ，然后再次消失#zeus然后淡出#zeus和淡入#zeuss等。

Answer 1:

由于通常情况下，一般的和可扩展的解决方案是简单的：

UPDATE：拿了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

Answer 2:

我想你想淡入淡出和2个不同的div无限滚动。试试下面的代码，让我知道，

DEMO

$(document).ready(function() {
    var isZeuss = false;
    var $zeus = $('#zeus');
    var $zeuss = $('#zeuss');

    $zeuss.hide();

    setTimeout(function () {//<-- Not sure if you want this 5 sec delay in starting the animation
       setInterval(function() {
         var $fadeOutBanner = (isZeuss)?$zeuss:$zeus;
         var $fadeInBanner = (isZeuss)?$zeus:$zeuss;

         $fadeOutBanner.fadeOut(1000, function () {
             $fadeInBanner.fadeIn(1000);
             isZeuss = !isZeuss;
         });
       }, 2000);
     }, 5000); //<-- Not sure if you want this         
});

编辑：您可以增加fadeIn/fadeOut定时器或setInterval较慢转变计时器。

Answer 3:

一个旗帜可见这一个开始，然后开始淡出，在，延迟，等等http://jsfiddle.net/TtPFc/1/

#zeus { background-color: blue; color: white; display:none}
#zeuss { background-color: red; color: white; }


<div id="zeus">Zeus Banner</div>
<div id="zeuss">Zeuss Banner</div>


$(document).ready(function() {
    var zeus    =  $('#zeus'), 
        zeuss   =  $('#zeuss'),
        forward = true;

    setInterval(function() {
        if (forward) {
           zeus.fadeOut(1000, function() { zeuss.fadeIn(1000); });
        }
        else { 
           zeuss.fadeOut(1000, function() { zeus.fadeIn(1000); });
        }

        forward = !forward;

     }, 5000);
});

Answer 4:

确定，而无需使用.delay()和连接一个动画到先前动画的精确完成的开始（不依靠定时器和动画的同步），并实施与该重复序列的动画：

宙斯可见，zeuss不可见
暂停5秒
淡出宙斯
淡入zeuss
淡出zeuss
淡入宙斯
重复

你可以像下面这样做：

$(document).ready(function() {
    var z1 = $('#zeus');
    var z2 = $('#zeuss').hide();

    function cycle() {
        setTimeout(function() {
            z1.fadeOut(1000, function() {
                z2.fadeIn(1000).fadeOut(1000, function() {
                    z1.fadeIn(1000, cycle)
                });
            });
        }, 5000);
    }
    cycle();
});

如果你只想要5秒暂停的第一个周期之前，而不是在下面的循环（这在过去是没有完全清楚，我在你的问题），也可以是这样的：

$(document).ready(function() {
    var z1 = $('#zeus');
    var z2 = $('#zeuss').hide();

    function cycle() {
        z1.fadeOut(1000, function() {
            z2.fadeIn(1000).fadeOut(1000, function() {
                z1.fadeIn(1000, cycle)
            });
        });
    }
    // start the fadeIn/fadeOut cycling after 5 seconds
    setTimeout(cycle, 5000);
});

仅供参考，名称的选择zeus和zeuss是可怕的混乱。这是非常，非常容易让他们感到困惑，很容易在代码中的错误。

如果你在一个更现代版本的jQuery，可以使用了.delay()那么这将是一个有点简单：

$(document).ready(function() {
    var z1 = $('#zeus');
    var z2 = $('#zeuss').hide();

    function cycle() {
       z1.delay(5000).fadeOut(1000, function() {
           z2.fadeIn(1000).fadeOut(1000, function() {
               z1.fadeIn(1000, cycle)
           });
       });
    }
    cycle();
});