Question

I am trying to run the following animation for a set of div elements (lets say 50), however, the $.each() function is only working for the first element in the array.

$.each(droplets, function(){
splashVanish(this);
 }); 



  function splashVanish(droplet) {
   droplet.fadeOut(500, function(){
     droplet.css({'top':Math.random()*600+'px','left':Math.random()*1400+'px'});
     droplet.remove();
     $("body").append(droplet);
             //recursive call for infinite animation time
     droplet.fadeIn(500,function(){splashVanish(droplet)}); 
   });
 } 

When the above code runs, only the first div in the array fadesOut, randomizes position and fadesIn for infinite animatiion duration. Sadly, all the other 49 divs are static and not executing the same function.

Answer 1

According to your comment, if droplets is a collection of divs you need to use each() instead. $.each() iterates arrays. Try this and see if it works.

droplets.each(function(){
    splashVanish($(this));
});