Question

I have 2 jquery animations. I want them both to loop infinitely. There needs to be a delay on the second animation of 3 seconds but only the first time it triggers. Once the second animation has started, there needs to be no delay.

I’ve created a striped down version of the code so far to make it clearer.

The HTML:

<div class="block1"></div>
<div class="block2"></div>

The CSS:

div.block1,
div.block2 { 
  position: absolute;
  display: block;
  top: -100%;
  height: 100%;
  width: 100%; }

The jQuery

function block1(){
  $("#block1").animate({ top: '100%'}, 6000, 'linear', function(){ $(this).css('top', '-100%') });
  block1();
}

function block2(){
  $("#block2").animate({ top: '100%'}, 6000, 'linear', function(){ $(this).css('top', '-100%') });
  block2();
}

block1();
block2();

So I have 2 problems with this. Firstly when I try to call the second function (block2), it doesn’t work. Secondly, I’m not sure how to apply the delay I’m after. Any suggestions?

Answer 1

You can use this code to set delay initially then animation will work infinitely without any delay. setTimeout will call block1 function with specified delay, once 1st animation completes then it’ll make call to 2nd and this will continue for indefinite.

JS:

function block1() {
    $(".block1").animate({
        top: '+=10px'
    }, 600, 'linear', function() {
        block2();
    });
}

function block2() {
    $(".block2").animate({
        top: '+=10px'
    }, 600, 'linear', function() {
        block1();
    });
}

setTimeout(block1, 3000);​

CSS:

div.block1, div.block2 { 
  position: absolute;
  display: block;
  top: 0;
  height: 100px;
    width: 100px; 
   background-color: red; 
}

div.block2 { top: 200px; } 

HTML:

<div class="block1">Block 1</div>
<div class="block2">Block 2</div>​

WORKING DEMO