jquery - jquery show() 在 setTimeout() 方法后不起作用

Question

我有一个弹性滑块，其中 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)`);
  }
});

标签： jquerysettimeout