jquery show() не срабатывает послеr setTimeout() method

У меня есть flex div, в котором лежат еще 3 div с разным количеством контента, которые при клике на кнопку смещаются translateX(-100%). Для того, чтобы удерживать footer под контентом актуального слайда, мне нужно прятать контент предыдущего, но только после того, как он покинет viewport, для этого я использую setTimeout(), при достижении последнего слайда, весь контент возвращается к translateX(0), но по какой-то причине скрытый контент не отображается.

let count = 0;
let services = Array.from(document.querySelectorAll('article'));
$('#services-prev').on('click',function(){
     if(count>0) {
       count--;
       $('.services-slide').css('transform',`translateX(-${count*100}%)`);
       $('#services-articles article').css('transform',`translateX(-${count*100}%)`);
       $('.services-item',services[count]).show();
     };
    });
   $('#services-next').on('click',function(){
    if(count<3) {
      count++;
      $('.services-slide').css('transform',`translateX(-${count*100}%)`);
      $('#services-articles article').css('transform',`translateX(-${count*100}%)`);
      setTimeout(function(){$('.services-item',services[count-1]).hide()},500);

    }
    if(count>=3){
      $('.services-item').show();
      count = 0;
      //$('.services-slide').appendTo($('.services-slider-container'));
      $('.services-slide').css('transform',`translateX(0)`);
      $('#services-articles article').css('transform',`translateX(0)`);

    }
   });