jquery show () не работает после метода setTimeout () - PullRequest
0 голосов
/ 25 января 2019

У меня есть гибкий слайдер с 3 делениями, заполненными разным количеством контента. Когда кнопка нажата, все эти 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)`);
  }
});
...