JQUERY在2个div和循环函数之间淡出?

时间:2015-01-30 12:37:22

标签: jquery

我正在使用以下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");
});

2 个答案:

答案 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>