1

Доброго

Ajax по определенному сценарию тащит новые данные, обновляю, все норм. Решил попробовать с эффектами сделать

array.forEach(function(item, i, array){
    var event_id = i;
    var event_va = item;
    $("#event_" + event_id).slideUp().delay(300).html(event_va).fadeIn(500);
});

грубо говоря проходимся в цикле по дивам, у них заменяются значения + эффект. Но получается странная вещь, эффекты применяются сразу для всех элементов

Вопрос прост, как оптимизировать конструкцию, что бы сначала эффект появления/исчезания был у первого элемента, после полного выполнения эффекта у второго и т.д. ?

2
  • используйте callback
    – C.Raf.T
    21 сен 2016 в 14:20
  • прошу, примером напугайте, а то если честно не представляю как код еще и на доп функцию разбить, которую нужно вызвать
    – gforce
    21 сен 2016 в 14:30

1 ответ 1

2

Очевидно же - глянуть документацию jQuery.
Методы анимации принимают callback, который выполнится после окончания анимации.
Метод fadeIn не исключение.

let array = ['merry', 'christmas', 'and', 'happy', 'new', 'year'],
    show = (e, data) => e.slideUp().delay(300).html(data).fadeIn(500, () => t.next()),
    t = showMe();

function* showMe(){
  for(let i = 0; i < array.length; i++){
    show($("#event_" + i), array[i]);
    yield;
  }
}

t.next();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='event_0'></div>
<div id='event_1'></div>
<div id='event_2'></div>
<div id='event_3'></div>
<div id='event_4'></div>
<div id='event_5'></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.