CODEWITHSUNDEEP
javascriptjqueryjquery-animatequeuesequence
seedy
seedy

Reputation: 91

queue separate continuous animations and run in sequential order than repeat

I think I know just enough about jQuery to get me in trouble. I have three continuous animations that I am happy with. But now need them to run sequentially and repeat. I am unsure about queuing or settimeout. Think I just need to rewrite and combine but not sure the best approach. Simplified my code into a JSFIDDLE.

$(document).ready(function() {
   var $pulse = $('.a');
   function runIt() {
      $pulse.animate({margin:"0 0 0 150px",opacity:"1"}, 1100)
      .animate({margin: "100px 0 0 150px",opacity:"0"}, 1400, 
      function() {
         $pulse.removeAttr("style");
         runIt();
      });
   }
   runIt();
});

//

$(document).ready(function() {
   var $pulse = $('.b');
   function runIt() {
      $pulse.animate({margin:"100px 0 0 150px",opacity:"1"}, 1100)
      .animate({margin: "200px 0 0 150px",opacity:"0"}, 1400, 
      function(){$pulse.removeAttr("style");
         runIt();
       });
   }
   runIt();
});

//

$(document).ready(function() {
   var $pulse = $('.c');
   function runIt() {
      $pulse.animate({margin:"200px 0 0 150px",opacity:"1"}, 1100)
         .animate({margin: "300px 0 0 150px",opacity:"0"}, 1400,
         function(){$pulse.removeAttr("style");
         runIt();
      });
   }
   runIt();
});

JSFIDDLE

Upvotes: 1

Views: 67

Answers (1)

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18354

With this:

$(document).ready(function() {
    var $pulse1 = $('.a'), $pulse2 = $('.b'), $pulse3 = $('.c');

    function runIt1() {
        $pulse1.animate({margin:"0 0 0 150px",opacity:"1"}, 1100)
        .animate({margin: "100px 0 0 150px",opacity:"0"}, 1400, function(){
            $pulse1.removeAttr("style");
            runIt2();
        });
    }    

    function runIt2() {
        $pulse2.animate({margin:"100px 0 0 150px",opacity:"1"}, 1100)
        .animate({margin: "200px 0 0 150px",opacity:"0"}, 1400, function(){
            $pulse2.removeAttr("style");
            runIt3();
        });
    }
    function runIt3() {
        $pulse3.animate({margin:"200px 0 0 150px",opacity:"1"}, 1100)
        .animate({margin: "300px 0 0 150px",opacity:"0"}, 1400, function(){
            $pulse3.removeAttr("style");
            runIt1();
        });
    }    
    runIt1();
});

Working here: http://jsfiddle.net/edgarinvillegas/ntxsS/1/

Cheers, from La Paz, Bolivia

Upvotes: 3

Related Questions