Question

我如何让两个div在两者之间交替淡入/淡出，这样一次只能看到一个？并使它成为一个永无止境的循环？

提前致谢!!

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

Answer 1

这是我自己的版本小提琴

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)

Answer 2

您的问题的解决方案比简单的fadeToggle更棘手，因为您不希望DIV同时显示。关键是将淡入淡出动作链接在一起，因此下一个淡入淡出动作将在前一个淡入淡出动作完成之前执行。

逻辑上，你想：DIV1淡入，DIV1淡出，DIV2淡入，DIV2淡出，重复。

我的解决方案将在页面上采用任意两个元素并激活其可见性，而不会同时显示任何一个元素。 iDuration指定每次转换的时间（以毫秒为单位）。

Working example

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解释器，以便浏览器可以在此淡入淡出循环运行时执行其他操作。

Answer 3

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

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>

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

祝你好运！

循环中两个div之间淡入/淡出

3 个答案: