clean way of making animations asynchronous/synchronous with jquery

Question

Hello all I am wondering how does one tackle asynchronous/synchronous (not sure if this is the word for it but the opposite of simultaneous) animations with jquery?

I know of one method but it's pretty messy:

$("ul li:nth-child(1)").addClass("appear").delay(300).queue(function(next){

$("ul li:nth-child(2)").addClass("appear");
next();

})

// and so on...

So I tried utilizing a for/while loop but it doesn't seem to work. What am I missing here?

$(document).ready(function(){

var i = 1;

while (i <= $("ul li").length) {

$("ul li:nth-child(" + i + ")").addClass("appear");

i++;
}

})

link to codepen -> https://codepen.io/alexyap/pen/KqZErW?editors=1111

I suppose the word you are searching for is "sequentially". Here's another question on that topic: https://stackoverflow.com/questions/1218152/how-can-i-animate-multiple-elements-sequentially-using-jquery — gus27, Jun 29 '17 at 09:21
Your while loop is only applying the class, but not using the `queue` function. — gus27, Jun 29 '17 at 09:23
appreciate the help, i skimmed through the contents, they're pretty awesome but is there no way at all to achieve this effect by utilizing a loop of some sort? it's ok and all but aren't the solutions a little repetitive? — Alex Yap, Jun 29 '17 at 09:28
i tried adding in the queue function but got confused as to where to put it — Alex Yap, Jun 29 '17 at 09:29
@AlexYap Here's another way: https://codepen.io/anon/pen/gRoJZd?editors=0011 — , Jun 29 '17 at 09:56

Martijn · Accepted Answer · 2017-06-29T09:35:12.410

1

Simple version with plenty of room for improvement, but it is a good basic example:

var $ul = $('ul');
for( var i=0; i < $ul.children("li").length; i++){
    setTimeout(function(){
       $ul.children("li:nth-child("+ (i+1) +")").addClass("appear");
    }, i*100);
}

It does not wait until the previous is done, it just loops it and in the loop it adds it to a timeout.

This is where async programming comes into play: The for loop loops through all iterations instantly. The loop itself does not delay at all. In the loop you set multiple setTimeouts, each with a 100ms longer delay than the previous.

If you are new to this logic, I strongly recommend you add a console.log before, after and inside the settimeout to see in what order the code works.

PS: you could also css them to display:none; and use jQuery's fadeIn()

edited Jun 29 '17 at 09:35

answered Jun 29 '17 at 09:24

Martijn

15,791
4
36
68

good stuff thanks but i tried adding it in to my codepen, nothing seems to happen, did you perhaps fork my pen by any chance? if so can i take a look at it? also, i hope u don't mind but i think i'll wait for more responses just to be able to look at what the other possible solutions would there be – Alex Yap Jun 29 '17 at 09:43
If that is the case, add the console.logs to see what is happening. There could be a small typo in the code. What does your console say after the logs? – Martijn Jun 29 '17 at 09:55
i'm not sure what to log to the console exactly? – Alex Yap Jun 29 '17 at 15:49
`console.log(1)` or some other random value. might use a few different to see what is happening when – Martijn Jun 30 '17 at 07:00

clean way of making animations asynchronous/synchronous with jquery

1 Answers1