CODEWITHSUNDEEP
jquery
sasori
sasori

Reputation: 5455

how to repeat the animation in jquery

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 ?

Upvotes: 0

Views: 258

Answers (1)

Eric Fortis
Eric Fortis

Reputation: 17350

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

Upvotes: 2

Related Questions