[Dan Atst]

Добрый день!
Подскажите пожалуйста, как вызвать функцию после окончания другой.
Пытался так, но не работает.

<div class="item item-1">Блок 1</div>
<div class="item item-2">Блок 2</div>
<div class="item item-3">Блок 3</div>
<div class="item item-4">Блок 4</div>
<div class="item item-5">Блок 5</div>

animfw($('.item'));
$.when(animfw($('.item'))).done(function() {
  animbw($('.item'));
});

function animbw(elem) {
  for (let j = 4; j > -1; j--) {
    setTimeout(function(){             $('.item:eq('+j+')').animate({'opacity':0}, 1000);
        },4000 - ( j * 1000 )); 
  }  
}

function animfw(elem) {
  for (let j = 0; j < 5; j++) {
    setTimeout(function(){             $('.item:eq('+j+')').animate({'opacity':1}, 1000);
        },1000 + ( j * 1000 )); 
  }  
}

Вот стили

.item {
  display: flex;
  align-items: center;
  justify-content: center;  
  font-family: Roboto;
  font-size: 60px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;  
  opacity: 0;
}
.item-1 {
  width: 100%;
  height: 100vh;
  position: absolute;
  background: #8b36e9;
}
.item-2 {
  width: 100%;
  height: 100vh;
  position: absolute;
  background: #444;  
}
.item-3 {
  width: 100%;
  height: 100vh;
  position: absolute;
  background: #ffaa41;  
}
.item-4 {
  width: 100%;
  height: 100vh;
  position: absolute;
  background: #cd9090;
}
.item-5 {
  width: 100%;
  height: 100vh;
  position: absolute;
  background: #aec5b4;  
}

Т.е. я хочу, что сначала поочередно появился каждый элемент, а затем в обратном порядке скрыть их.