Часть 1. Пишу слайдер на JQuery. Решил сделать так чтобы текстовый контент выводился по порядку (например, там контент из 3-x div), нужно было выводить с анимацией каждый (появился полностью один, начал появляться другой и т.д.). Но все появляется одновременно. Код
contentSlide: {
setup: function () {
content = slider.find('ul li').eq(slideIndex).find('div').eq(0);
content.count = content.find('div').length;
content.find('div').hide();
action.contentSlide.start();
},
start: function () {
for(var i = 0; i < 2; i++) {
var a, b, c, d;
a = content.find('div').eq(i);
b = a.attr('data-item-animate');
action.contentSlide.Item(b, a, i);
}
},
Item: function (a, b, c) {
b.show().addClass(a + ' animated');
}
}
Это отрывок кода. В Item обрабатываются анимации и вывод. Сначала скрываю все div и потом хочу по одному выводить. В start циклом беру каждый div и по указанному у него атрибуту выполняю анимацию. Для анимации использую animate.css
Часть 2. Использование .promise помогло, но частично.
start: function () {
if (content.index < content.count) {
var a, b;
a = content.find('div').eq(content.index);
b = a.attr('data-item-animate');
action.contentSlide.Item(b,a);
}
},
Item: function (a, b) {
b.fadeIn(1500);
b.promise().done(function () {
content.index++;
action.contentSlide.start();
});
}
Эта конструкция работает так как надо, но если поменять b.fadeIn(1500) на b.show().addClass(a + 'animated') то все снова плачевно.
Есть ли решение? Или делать всю анимацию на js?
.promise
– Grundy♦ 24 июн '17 в 19:07