Delay start of jQuery rotators, one second apart from each other
-
20-09-2019 - |
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.
Solution
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.
OTHER TIPS
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)
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow