Question

I am currently using javascript to add some animation to a rectangle and once the animation is finished, i set the box to not be displayed. Take a look below for the code to do that.

Javascript

$(document).ready(function() {  
  $(".filled-rectangle").stop().animate({top:'20px'}, 5000).queue(function(next){
    $(".filled-rectangle").css('display', 'none'); 
  });
});  

Now I want to add some more boxes in a container like this,

HTML

<div class="container">
  <div class="filled-rectangle"></div>
</div>

The code above is right now working for one div, .filled-rectangle
I want to add more divs, and use the same animation for all divs.

Answer 1

there are multiple ways.
you could use nested callbacks which essentially let’s you execute a function after another is completed.
Since you use a class (“filled-rectangle”) you can select the class in jquery and get an array of all elements with the class attached.
This array can be used to use each and delay the desired animation for each object, but in this case you can’t use differnt animations for each object it has to be the same.

Just look at this example -> https://stackoverflow.com/a/4661858/1841875

In short:

different animations after another: nested callbacks/queue

same animation on multiple objects after another: each() with delayed animation

in your case go with the each-delay-solution 😉