1

我将如何让两个 div 在两者之间交替淡入/淡出，以便一次只能看到一个？并且还让它进入一个永无止境的循环？

提前致谢！！

我知道应该使用 .fadeOut 和 .fadeIn 来完成 - 但不知道如何让它一遍又一遍地循环。

4

3 回答 3

6

这是我自己的版本

http://jsfiddle.net/3KydB/

window.switchIn = function () {
    $('.red').fadeToggle(function() {
        $('.blue').fadeToggle(function() {
            setTimeout(function() {window.switchOut();}, 500);
        });
    });

}

window.switchOut = function () {
    $('.blue').fadeToggle(function() {
        $('.red').fadeToggle(function() {
            setTimeout(function() {window.switchIn();}, 500);
        });
    });

}

setTimeout(function() {window.switchIn();}, 500)
于 2013-01-29T18:49:58.717 回答
3

您的问题的解决方案比简单的解决方案要复杂一些，fadeToggle因为您不希望任何一个 DIV 同时显示。关键是将淡入淡出动作链接在一起，这样下一个淡入淡出动作在前一个淡入淡出动作完成之前不会执行。

从逻辑上讲，您想要：DIV1 淡入，DIV1 淡出，DIV2 淡入，DIV2 淡出，重复。

我下面的解决方案将采用页面上的任何两个元素并振荡它们的可见性，而不会同时显示任何一个。iDuration以毫秒为单位指定每个转换的时间。

工作示例

HTML：

<div id="div1" style="display:none;">DIV #1</div>
<div id="div2" style="display:none;">DIV #2</div>

JavaScript：

function runToggle(iDuration, domFirst,domSecond) {
        $(domFirst).fadeToggle(iDuration, "linear",function() {
          $(domFirst).fadeToggle(iDuration, "linear",function() {
            $(domSecond).fadeToggle(iDuration,"linear",function() {
              $(domSecond).fadeToggle(iDuration,"linear",function() {
                  setTimeout(function() {
                      runToggle(domFirst,domSecond) ;
                  },50);
              });
            }); 
          });
       }); 
};

runToggle(1000, $('#div1'),$('#div2'));

我使用setTimeout不是为了计时目的，而只是为了释放 JavaScript 解释器，以便浏览器可以在这个淡入淡出循环运行时做其他事情。

于 2013-01-29T19:03:15.267 回答
0

你好吗，你可以做到这一点。

setInterval() - 以指定的时间间隔一遍又一遍地执行一个函数；

setInterval（代码，毫秒，语言）

所以，你可以创建一个函数来实现它。一个例子

<div id="one" style="display:none;"></div>
<div id="two"></div>
<script>
$(function(){
setInterval(function(){MakeToggleDivs();},1000);
});
function MakeToggleDivs(){
$('#one').fadeToggle(400);
$('#two').fadeToggle(400);
}
</script>

这必须有效，告诉我是否无效。

祝你好运！

于 2013-01-29T18:47:41.550 回答