淡出第一个 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

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() 并将一个动画的开始链接到前一个动画的确切完成（不依赖于计时器和动画的同步）并使用此重复序列实现动画：

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

你可以这样做：

$(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();
});

Answer 5

如果你制作一个 zeusfadeIn 和 zeusfadeOut 怎么办？ zeusfadeIn 淡入并调用 zeusfadeOut zeusfadeOut 淡出并调用 zeusfadeIn