Delay start of jQuery rotators, one second apart from each other

Question

I have three rotators on the front page and I'd like them to start 1 second after each other.

$(document).ready(function(){
 $('#rot_top').cycle({  
  speed: 500,
  timeout: 2000
 });
 $('#rot_mid').cycle({  
  speed: 500,
  timeout: 2000
 });
 $('#rot_btm').cycle({  
  speed: 500,
  timeout: 2000
 });
});

after the initial start - they should proceed according to their regular timeout.

Thank you so much for your help in advance.

Answer 1

setTimeout is pretty useful for this, give this a try:

$(document).ready(function(){ 

  startCycle = function({
    $('#rot_top').cycle({speed: 500, timeout: 2000 }); 
    $('#rot_mid').cycle({speed: 500, timeout: 2000 }); 
    $('#rot_btm').cycle({speed: 500, timeout: 2000 }); 
  })

  setTimeout(startCycle();, 1000)
});

Answer 2

It looks like you're using the jQuery Cycle plugin? If so, there's a delay option which delays only the first change:

$(document).ready(function(){
    $('#rot_top').cycle({           
        speed: 500,
        timeout: 2000
    });
    $('#rot_mid').cycle({           
        speed: 500,
        timeout: 2000,
        delay: 1000,
    });
    $('#rot_btm').cycle({           
        speed: 500,
        timeout: 2000
        delay: 2000,
    });
});

This will start the first cycle immediately, the second cycle a second later, and the third cycle a second after that.