queue separate continuous animations and run in sequential order than repeat

Question

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

You could post it here: codereview.stackexchange.com

A. Wolff
– A. Wolff

2014-01-09 18:07:31 +00:00
Commented Jan 9, 2014 at 18:07 — A. Wolff
– A. Wolff, Commented Jan 9, 2014 at 18:07

Edgar Villegas Alvarado · Accepted Answer · 2014-01-09 18:18:54Z

3

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

answered Jan 9, 2014 at 18:18

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

seedy Over a year ago

Great. Thats exactly what I needed. I learn by example. Thanks.

Collectives™ on Stack Overflow

queue separate continuous animations and run in sequential order than repeat

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related