Как сделать плавное изменение табов?

252

11 февраля 2019, 23:30

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

$(document).ready(function () {
  $('.s-services__controls_link').on('click',function (e) {
    e.preventDefault();
    var tabItem = $(this).closest('.s-services__controls_item'),
        tabContentItem = $('.s-services__tab_item'),
        tabItemPosition = tabItem.data('services');
    tabContentItem.filter('.s-services__tab_item-' + tabItemPosition)
      .add(tabItem)
      .addClass('active')
      .siblings()
      .removeClass('active');
  });
});

Answer 1

Как вариант, надо поменять логику вот тут:

   tabContentItem.filter('.s-services__tab_item-' + tabItemPosition)
      .add(tabItem)
      .addClass('active')
      .siblings()
      .removeClass('active');
  });

Вместо добавления/удаления класса. На что-то типа такого: https://codepen.io/Lukyanenko/pen/ZqyNwR?editors=1111

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

Answer 2

Вопрос был решен вот так. https://jsfiddle.net/4Lqcb5em/1/ Спасибо тем, кот откликнулся.