La mise en marche des rotateurs jQuery, un seconde distance les uns des autres

Question

J'ai trois rotateurs sur la première page et je les aime commencer 1 seconde après l'autre.

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

après le démarrage initial -. Ils doivent procéder en fonction de leur délai d'attente régulière

Merci beaucoup pour votre aide à l'avance.

Answer 1

On dirait que vous utilisez le plugin jQuery Cycle ? Si oui, il y a une option qui retarde delay que le premier changement:

$(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,
    });
});

Cela va démarrer le premier cycle immédiatement, le deuxième cycle une seconde plus tard, et le troisième cycle, une seconde après.

Answer 2

setTimeout est très utile pour cela, pour cette solution:

$(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)
});