我正在使用以下jquery文档就绪函数来尝试在循环上淡化2个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");
});
答案 0 :(得分:3)
您可以使用 fadeToggle(),而不是分别为每个div使用fadeIn()和fadeOut(),并使用 recursion <创建 setTimeOut循环 / em>的
<script>
$(document).ready(function(){
timeout();
function timeout() {
$(".switch_up").fadeToggle("slow");
setTimeout(function () {
$(".switch_up2").fadeToggle("slow");
timeout();
}, 5000);
}
});
</script>
这是demo
干杯!
答案 1 :(得分:2)
首先,您需要使用.fadeToggle()
在淡入和淡出之间切换。
其次,你应该使用setInterval
,它以指定时间间隔运行,而不是只运行一次的setTimeout
。
$(function(){
//this sets an infinite timer that launches the function after
//5 seconds, and keeps doing it every 5 seconds infinitely.
setInterval(TogglePanels,5000);
});
function TogglePanels(){
var $first;
var $second;
//check which one is visible, to fade it out first:
if($(".switch_up").is(":visible")){
$first=$(".switch_up");
$second=$(".switch_up2");
}else{
$first=$(".switch_up2");
$second=$(".switch_up");
}
//fade out the visible panel
$first.fadeToggle("slow",function(){
//this is a callback function that runs when the fading is complete.
//fade in the invisible panel
$second.fadeToggle("slow");
});
}
.switch_up{
width:100px;
height:100px;
background:red;
}
.switch_up2{
width:100px;
height:100px;
background:blue;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch_up"></div>
<div class="switch_up2"></div>