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

Question

[deniskins23]

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

$(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

[Dies Irae]

Можно использовать Webkit.
CSS свойство -webkit-transition можно посмотреть, даже с примерами)

Comments

[Dies Irae]

Префиксы по браузерам:
IE
Двигатель: Trident
CSS-префикс: -ms
EDGE
Двигатель: EdgeHTML
CSS-префикс: -ms
Firefox
Двигатель: Gecko
CSS-префикс: -moz
Opera
Двигатель: Presto → Blink 1
CSS-префикс: -o (Presto) и -webkit (Blink)
Safari
Двигатель: WebKit
CSS-префикс: -webkit
Chrome
Двигатель: WebKit → Blink 2
CSS-префикс: -webkit

[deniskins23]

Dies Irae, А причем тут вообще кроссбраузерные префисы?и как css будет тут вообще работать?тут идет изменение через js? так что добавление свойств в css вообще ничего не изменит. Тут надо добавлять что-то в духе setTimeout или какую то анимацию типа fadeIn, просто я не знаю как это сделать в данном примере.

[Dies Irae]

deniskins23, браузер будет плавно отрисовывать изменение CSS-стиля.
К примеру, у тебя у таба был font-size: 24px. По событию onclick - у тебя добавляется новый класс active, у которого font-size: 40px, -webkit-transition-property: font-size и -webkit-transition-duration:2s. Тогда font-size плавно увеличится с 24 до 40 за 2 секунды. Пример

[deniskins23]

Dies Irae, Нет друг, к сожалению это как я и предполагал, не работает. Хотел бы показать тебе, но, к сожалению у меня сетка на миксинах и я просто замаюсь ее копить..На js не подскажешь как добавить анимацию(плавность) в этот код?