Как задать эффекты для переходов табов в слайдере?

Question

[barabash2090]

Добрый день!Как задать эффекты при переходе табов на слайдере?Именно в том примере.

Answer 1

[FeST1VaL]

В каком смысле как? У вас просто самописный скрипт, даже не слайдера, а просто переключение табов...

вы делаете show() и hide(), вы можете по сути их заменить на fadeIn(250) и fadeOut(250)... только немного изменить стили придется. Чтобы не скакали

Comments

[barabash2090]

а если задать эффекты на css и задать их при переходе табов?

[FeST1VaL]

barabash2090, ну например поставить animate.css и после смены навешивать соответствующие классы.

[barabash2090]

спасибо!

[barabash2090]

Артем Будин, то есть в getWrapper.find('.tab-post-content>div').hide(); вместо hide animate и скобках классы?

[FeST1VaL]

barabash2090, нет, просто классы... т.е addClass. Я не знаю может вам это поможет Вот тут пример, тут на баннере после автоматической смены и при инициализации слайдера вызывается анимация из animate.css

Примерно это выглядит так.

var animationEnd = 'animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd';
var animationNameImage = 'animated fadeInUpImage';
var animationNameButton = 'animated fadeInUpButton';
var animationNameText = 'animated fadeInUpText';
var animationCheckBox = 'animated bounce';

function animatedCheckbox(el){
	el.addClass(animationCheckBox).one(animationEnd, function(){
		$(this).removeClass(animationCheckBox).addClass('animationEnd');
	});
}


function animatedOnInit(event){
	var item = 0;
	$('#item-text_'+item).addClass(animationNameText).one(animationEnd, function(){
		$(this).removeClass(animationNameText).addClass('animationEnd');
	});
	$('#item-heading_'+item).addClass(animationNameText).one(animationEnd, function(){
		$(this).removeClass(animationNameText).addClass('animationEnd');
	});
	$('#item-button_'+item).addClass(animationNameButton).one(animationEnd, function(){
		$(this).removeClass(animationNameButton).addClass('animationEnd');
	});
	$('#item-mobile_button_'+item).addClass(animationNameButton).one(animationEnd, function(){
		$(this).removeClass(animationNameButton).addClass('animationEnd');
	});
	$('#item-image_'+item).addClass(animationNameImage).one(animationEnd, function(){
		$(this).removeClass(animationNameImage).addClass('animationEnd');
	});
}
$(document).ready(function() {
	animatedOnInit();
});