Как сделать повтор анимации на jquery?

Question

[Hoffman_ZZZ]

Добрый день!
Есть слайдер owl-carousel + подключил animate.css для анимации текста.
Нужно анимировать текст на активной картинке слайдера. Добавил $('p').addClass('fadeInDown'); , но анимация срабатывает только 1 раз, при загрузке документа и все. Потом когда перелистываешь анимация для текста не срабатывает.


ссылка на исходники
https://yadi.sk/d/lz4DhKc0hBfPT

Comments

[Александр Таратин]

rar архив на файлообменнике... Будете долго ждать пока вам помогут.

Answer 1

[Valery]

Нужный вам коллбэк — afterAction

owl.owlCarousel({
	navigation : false,
	singleItem : true,
	slideSpeed : 300,
	paginationSpeed : 400,
	autoPlay: true,
	transitionStyle : "fade",
	addClassActive : true,

	afterAction: function(){
		$('p').removeClass('fadeInDown');
		$('.active p').addClass('fadeInDown');
	}
});

Comments

[Hoffman_ZZZ]

Спасибо)

[teotlu]

ну вот, я опоздал :)

Answer 2

[shipovalovyuriy]

Просто вставь перед
$('p').addClass('fadeInDown');
Строчку
$('p').removeClass('fadeInDown');

Comments

[Hoffman_ZZZ]

не работает

[Hoffman_ZZZ]

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

[shipovalovyuriy]

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

[shipovalovyuriy]

Если так необходимо применять к одному, то введи переменные next current. И отслеживай index каждой картинки. Потом на нужную по ее порядковому номеру применишь класс

[shipovalovyuriy]

Что-то типа $('.image').eq(next).children('p').addClass...

[Hoffman_ZZZ]

Нашел в настройках, теперь у активной картинки есть класс active. Пишу такой код

$(document).ready(function() {

var owl = $("#owl-demo");

owl.owlCarousel({
navigation : true,
singleItem : true,
slideSpeed : 300,
paginationSpeed : 400,
autoPlay: true,
addClassActive : true,
transitionStyle : "fade"
});

$('.active p').addClass('fadeInDown');

});

, все равно срабатывает единоразово

[shipovalovyuriy]

Hoffman_ZZZ: Нужно посмотреть к какому элементу применяется класс .active и сделать так $('элемент').hasClass('active').children('p').addClass

[Hoffman_ZZZ]

var owl = $("#owl-demo");

owl.owlCarousel({
navigation : true,
singleItem : true,
slideSpeed : 300,
paginationSpeed : 400,
autoPlay: false,
addClassActive : true,
transitionStyle : "fade"
});

$('div').hasClass('active').children('p').addClass('fadeInDown');

});
Теперь вообще анимация перестала работать.

[Hoffman_ZZZ]

https://yadi.sk/i/4vAAlKFihBkPi
сдесь скрин структуры

[shipovalovyuriy]

Hoffman_ZZZ:
$('.owl-item').hasClass('active').children().find('.animated').removeClass();
$('.owl-item').hasClass('active').children().find('.animated').addClass();

[Hoffman_ZZZ]

Все равно, даже анимация не срабатывает

[Stalker_RED]

shipovalovyuriy: а разве нельзя эту колбасу $('.owl-item').hasClass('active').children().find('.animated')
записать как $('.owl-item .active .animated') ?

Answer 3

[teotlu]

Архив не качал, но предположу, что вам просто надо при смене слайда убирать этот самый класс 'fadeInDown', чтобы при новом его появлении снова его добавить. И добавлять класс на активный слайд, когда он, собственно, становится активным.

Привяжите добавление/удаление класса у соответствующего элемента к нужным событиям карусели.

Comments

[Hoffman_ZZZ]

Получается так , что все слайдеры сразу активны. Потому, что анимация срабатывает сразу для всех слайдов. И я не могу тогда добавить класс именно активному слайду

[teotlu]

Hoffman_ZZZ: не очень понятно. К сожалению, сейчас надо бежать. Как будет возможность, если вам ещё не ответят, скачаю и гляну исходники.

[Hoffman_ZZZ]

спасибо