setTimeout（）方法后，jquery show（）不起作用

Question

我有一个flex滑块，其中3 div填充了不同数量的内容。单击按钮后，所有这些div的translateX(-100%)。

要使页脚始终位于可见内容的底部，我需要隐藏上一张幻灯片的内容，但仅当它离开视口时才这样做。为此，我正在使用setTimeout()。当滑块达到幻灯片的限制时，所有内容都会转换回X(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)`);
  }
});