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并淡入{ {1}}等等。

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

好的，不使用.delay()并将一个动画的开头链接到上一个动画的完全完成（不依赖于定时器和动画的同步）并使用这个重复序列实现动画：

zeus可见，zeuss不可见
暂停5秒
淡出宙斯
Fade In 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();
});

Answer 4

这个从一个横幅可见开始，然后它开始淡出，中，延迟等... 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 5

如果你使用zeusfadeIn和zeus fadeOut怎么办？ zeus fadeIn do淡入并调用zeus fadeOut zeus fadeOut淡出并调用zeusfadeIn

fadeOut first div然后淡出第二个div

5 个答案: