Как использовать setInterval для скрытия/показа div?

console.info('Скрипт начнёт работать через 5 секунд'); 
 
var hideOne = setInterval(function(){ 
  $('.one').hide(function(){ 
    clearInterval(hideOne); // От повторного запуска 
     
    console.info('Красный блок исчез, через 5 секунд появится синий блок'); 
    var showTwo = setInterval(function(){ 
      clearInterval(showTwo); 
      $('.two').show(); 
    },1000*5); // 5 sec 
  }); 
},1000*5); // 5 sec

.one, 
.two { 
  display: block; 
  width: 30px; 
  height: 30px; 
} 
 
.one { 
  background: red; 
} 
 
.two { 
  background: blue; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="one"></div> 
<div class="two" style="display: none;"></div>

// Все квадраты 
var boxes = document.querySelectorAll('.box') 
// Счетчик 
var i = 0; 
// Module 
var mod = boxes.length 
// Интервал в 5 сек 
setInterval(() => { 
  boxes[i % mod].classList.toggle('hide'); 
  boxes[++i % mod].classList.toggle('hide'); 
}, 5000);

.one, 
.two, 
.three { 
  display: block; 
  width: 30px; 
  height: 30px; 
} 
 
.one { 
  background: red; 
} 
 
.two { 
  background: blue; 
} 
 
.three { 
  background: orange; 
} 
 
.hide { 
  display: none; 
}

<div class="box one "></div> 
<div class="box two hide"></div> 
<div class="box three hide"></div>