Question

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

Answer 1

您可以使用 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

干杯！

Answer 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>

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

2 个答案: