Создать эффект повторения? Циклом или нет?

Question

[svilkov87]

Здравствуйте!
Блоки .block1 и .block2 должны менять друг друга по очереди. Пока что .block1 исчезает, при этом плавно появляется другой.
Как сделать, чтобы при исчезновении .block2, опять появлялся .block1? https://jsfiddle.net/svilkov87/ao7ethe2/54/

<div class="main">
<div class="block1">
  <p>block1</p>
</div>

<div class="block2">
  <p>block2</p>
</div>

<div class="block3">
  <p>block3</p>
</div>
</div>

.block1{
  width: 100%;
  height: 100vh;
  background: #bbb;
  position:absolute;z-index:1;
}
.block2{
  width: 100%;
  height: 100vh;
  background: #000;
  display: none;
  position:absolute;z-index:2;
  color: #fff;
  }
.block3{
  width: 100%;
  height: 100vh;
  background: #bbb;
  display: none;
  position: relative;
  
}

$(document).ready(function(){
    function func() {
    $(".block1").fadeOut(5000);
    };
   setTimeout(func, 3000);
    
    
    function func1() {
    $(".block2").fadeIn(3000).css("display","block");
    };
    setTimeout(func1, 3000);
    

});

Answer 1

[Дмитрий Беляев]

https://jsfiddle.net/ao7ethe2/55/
и никаких dom-анимаций на js для таких пустяков!

Answer 2

[holymotion]

Я новичок, но можно думаю так, скорость сами подрегулируете (если конечно вам так надо джсом, а не не цсс)

$(document).ready(function(){
    var flag = true;  
    setInterval(function(){
    	if (flag) {
    	  $(".block1").fadeOut(1000).css("display", 'none'); 
      	  $(".block2").fadeIn(1000).css("display", "block"); 
          flag = false;
      } else { 
      	  $(".block2").fadeOut(1000).css("display", 'none');
    	  $(".block1").fadeIn(1000).css("display", "block");
          flag = true;
      }
    }, 3000);
});