JQUERY在2个div和循环函数之间衰减？

我正在使用下面的jquery document ready函数尝试在循环中的两个div之间淡入淡出。该功能应具有超时/延迟，以便在页面加载后5秒后启动，然后每隔5秒在2个div之间持续衰减

谁能告诉我哪里出了问题，谢谢

$(document).ready(function () {
    function showpanel() {
        $(".switch_up").fadeOut("slow");
        $(".switch_up2").fadeIn("slow");
    }
    setTimeout(showpanel, 5000);
    $(".switch_up2").fadeOut("slow");
    $(".switch_up").fadeIn("slow");
});

---

首先，您需要使用

.fadeToggle（）

在淡入淡出之间切换。
其次，您应该使用以指定时间间隔运行的

setInterval

，而不是只运行一次的

setTimeout

$（函数（）{
//这将设置一个无限定时器，该定时器在
//5秒，然后无限期地每5秒做一次。
设置间隔（切换面板，5000）；
});
函数切换面板（）{
var$第一；
var$秒；
//检查哪一个可见，先将其淡出：
如果（$（“.switch_up”）.是（“：visible”））{
$first=$（“.switch_up”）；
$second=$（“.switch_up2”）；
}否则{
$first=$（“.switch_up2”）；
$second=$（“.switch_up”）；
}
//淡出可见面板
$first.fadeToggle（“慢”，function（）{
//这是一个回调函数，在淡入结束时运行。
//淡入不可见的面板
$second.fadeToggle（“慢”）；
}); 
}

。向上切换{
宽度：100px；
高度：100px；
背景：红色；
}
.开关_up2{
宽度：100px；
高度：100px；
背景：蓝色；
显示：无；
}

---

首先，您需要使用

.fadeToggle（）

在淡入淡出之间切换。
其次，您应该使用以指定时间间隔运行的

setInterval

，而不是只运行一次的

setTimeout

$（函数（）{
//这将设置一个无限定时器，该定时器在
//5秒，然后无限期地每5秒做一次。
设置间隔（切换面板，5000）；
});
函数切换面板（）{
var$第一；
var$秒；
//检查哪一个可见，先将其淡出：
如果（$（“.switch_up”）.是（“：visible”））{
$first=$（“.switch_up”）；
$second=$（“.switch_up2”）；
}否则{
$first=$（“.switch_up2”）；
$second=$（“.switch_up”）；
}
//淡出可见面板
$first.fadeToggle（“慢”，function（）{
//这是一个回调函数，在淡入结束时运行。
//淡入不可见的面板
$second.fadeToggle（“慢”）；
}); 
}

。向上切换{
宽度：100px；
高度：100px；
背景：红色；
}
.开关_up2{
宽度：100px；
高度：100px；
背景：蓝色；
显示：无；
}

---

您可以使用fadeToggle（）而不是对每个div分别使用fadeIn（）和fadeOut（），并使用递归创建setTimeOut循环

$（文档）.ready（函数（）{
超时（）；
函数超时（）{
$（“.switch_up”）.fadeToggle（“slow”）；
setTimeout（函数（）{
$（“.switch_up2”）.fadeToggle（“slow”）；
超时（）；
}, 5000);
} 
});

这是我的建议

---

干杯

您可以对每个div使用fadeToggle（）而不是单独使用fadeIn（）和fadeOut（），并使用递归创建setTimeOut循环

$（文档）.ready（函数（）{
超时（）；
函数超时（）{
$（“.switch_up”）.fadeToggle（“slow”）；
setTimeout（函数（）{
$（“.switch_up2”）.fadeToggle（“slow”）；
超时（）；
}, 5000);
} 
});

这是我的建议

---

干杯

谢谢，但这会导致第一个div在页面加载后立即淡出。我希望在第一个音消失之前有5秒的延迟，然后在第二个音消失5秒，然后第二个音消失，第一个音又回来。这应该在无限循环中继续。有什么想法吗？你可以为你想首先看到的div添加css属性“display:block”。更新了Plunker。请看一看。谢谢。谢谢，这就快到了。不过我不希望两个div互相交叉淡入，我希望div 1在div 2淡入之前完全淡出，反之亦然。thanks@JamesDaley欢迎您检查我的答案，我的答案正好如此。谢谢，但这会导致第一个div在页面加载后立即淡出。我希望在第一个音消失之前有5秒的延迟，然后在第二个音消失5秒，然后第二个音消失，第一个音又回来。这应该在无限循环中继续。有什么想法吗？你可以为你想首先看到的div添加css属性“display:block”。更新了Plunker。请看一看。谢谢。谢谢，这就快到了。不过我不希望两个div互相交叉淡入，我希望div 1在div 2淡入之前完全淡出，反之亦然。thanks@JamesDaley欢迎您检查我的答案，我的答案正是如此。

<script>
$(document).ready(function(){

  timeout();

  function timeout() {
     $(".switch_up").fadeToggle("slow");
     setTimeout(function () {
         $(".switch_up2").fadeToggle("slow");
         timeout();
     }, 5000);
} 
});
</script>