Javascript 环路上两个div之间的淡入/淡出

我如何使两个div交替淡入/淡出，以便一次只能看到一个div？也让它成为一个永无止境的循环

提前谢谢

---

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

您好，您可以做到这一点

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>

$（函数（）{
setInterval（函数（）{MakeToggleDivs（）；}，1000）；
});
函数MakeToggleDivs（）{
美元("一"),衰减切换(400),；
美元("两个"),快速切换(400),；
}

这一定行得通，如果不行就告诉我

---

祝你好运

你好，你能行

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>

$（函数（）{
setInterval（函数（）{MakeToggleDivs（）；}，1000）；
});
函数MakeToggleDivs（）{
美元("一"),衰减切换(400),；
美元("两个"),快速切换(400),；
}

这一定行得通，如果不行就告诉我

---

祝你好运

这是我自己的版本拉小提琴

---

这是我自己的版本拉小提琴

---

您的问题的解决方案比简单的

fadeToggle

稍微复杂一些，因为您不希望两个DIV同时显示。关键是将淡入淡出动作链接在一起，以便在前一个淡出动作完成之前不会执行下一个淡出动作

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

我下面的解决方案将采用页面上的任意两个元素，并在不同时显示任何一个元素的情况下振荡它们的可见性<代码>持续时间以毫秒为单位指定每次转换的时间

HTML:

---

我使用

setTimeout

并不是为了计时，而是为了释放JavaScript解释器，以便浏览器可以在淡入淡出循环运行时执行其他操作。

您的问题的解决方案比简单的

fadeToggle

稍微复杂一些，因为您不希望两个DIV同时显示。关键是将淡入淡出动作链接在一起，以便在前一个淡出动作完成之前不会执行下一个淡出动作

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

我下面的解决方案将采用页面上的任意两个元素，并在不同时显示任何一个元素的情况下振荡它们的可见性<代码>持续时间以毫秒为单位指定每次转换的时间

HTML:

---

我使用

setTimeout

并不是为了计时，而是为了释放JavaScript解释器，以便浏览器可以在淡入淡出循环运行时执行其他操作。

签出。他们太酷了。使用。看看。它们太酷了。使用。OP希望避免同时看到两个div——使用此解决方案，您可以在转换过程中同时看到这两个div。OP希望避免同时看到这两个div——使用此解决方案，您可以在转换过程中同时看到这两个div。太棒了-正是我需要的！谢谢你，太棒了，这正是我需要的！谢谢如果每个div都是一个链接，或者有一个需要单击的链接，那么此功能是否有效？如果每个div都是一个链接，或者有一个需要单击的链接，那么此功能是否有效？

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

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'));