2

遇到问题，我需要做一些类似褪色横幅的事情 - 一个 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等。

4

5 回答 5

5

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

更新：接受 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);
            });
        });
    }

});
  • 使用 jQuery 1.3.2 的演示
于 2012-04-17T16:09:28.930 回答
2

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

演示

$(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用于较慢过渡的计时器。

于 2012-04-17T15:48:08.300 回答
1

好的，不使用.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();
});
于 2012-04-17T15:44:36.293 回答
1

这个从一个可见的横幅开始，然后它开始淡出、淡入、延迟等...... 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);
});​
于 2012-04-17T15:51:36.927 回答
0

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

于 2012-04-17T15:47:06.937 回答