Question

i am playing with the animate of jquery
here’s what i have

     $('p:first').animate({
    'paddingLeft':'+=300px','opacity':'-=1' 
     },10000,'swing',function(){
     $(this).fadeOut('fast',function(){
         $('<p>test</p>').insertBefore($('p#2nd'));
     });
 });

now , my question is, how to repeat the same animate action on the inserterd

after the fadeOut effect ?, or, there’s a better way to do this ?

Answer 1

http://jsfiddle.net/efortis/2DKA9/2

startClouds() is called recursively until there are no more paragraphs.

function startClouds(i) {
  var lmargin = Math.round(Math.random() * 20) + '%',
      tmargin = Math.round(Math.random() * 20) + '%', 
      par = jQuery('p');

  if (i < par.length) {    
    par.eq(i).addClass('cloud')
      .css('left', lmargin)
      .css('top',  tmargin)
      .fadeIn(1000)
      .animate({'marginLeft' : '+=50%', 'opacity' : '-=.93'}, 4000)
      .fadeOut(1000, function () {
        startClouds(i += 1);            
      });       
    return true;       
  }  
  return false;
}

jQuery(function () {
  startClouds(0);
});