Good

Ajax on a specific scenario drags new data, update, all the rules. I decided to try to do with effects

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); });

roughly speaking, we go through a cycle of divas, they have the values ​​+ effect replaced. But it turns out a strange thing, the effects are applied to all elements at once.

The question is simple, how to optimize the design, so that first the appearance / disappearance effect is on the first element, after the effect is completely fulfilled on the second, etc. ?

  • use callback - C.Raf.T
  • I ask you to scare by example, otherwise I honestly can’t imagine how to break the code for the additional function that needs to be called - gforce

1 answer 1

Obviously, look at the jQuery documentation.
Animation methods accept a callback that will run after the animation ends.
The fadeIn method fadeIn no exception .

 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>