JQUERY fade между 2 divs и функцией цикла?

Question

Я использую следующую функцию jquery document ready, чтобы попытаться исчезнуть из двух divs в цикле. Функция должна иметь тайм-аут/задержку, так чтобы она начиналась через 5 секунд после загрузки страницы, а затем каждые 5 секунд после этого она должна постепенно исчезать между двумя разделителями.

Может кто-то пожалуйста, покажите мне, где я неправильно, благодаря

$(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() чередовать выцветанию и выходить.
Во-вторых, вы должны использовать 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>

Answer 2

Вы можете использовать fadeToggle() вместо использования FadeIn() и FADEOUT() отдельно для каждого DIV и создать цикл SetTimeout с использованием рекурсию.

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

    timeout(); 

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

Вот что demo

Ура!