Question

All,
I have this code:

var speed= 1000,
num = 1,
timer;

(function rotate() {
    var container_footer = jQuery("#rotate_container");
    var divs_footer = container_footer.children();
    var divs_footer_length = divs_footer.length;
    $("#item"+num).stop(true, true).fadeIn(speed).delay(speed).fadeOut(speed);;
    num>divs_footer_length  ? num=0 : num++;
    timer = setTimeout(rotate, speed*3);
})();

This works good and rotates the images. However, it fades a div out as soon as soon as it’s displayed and fades another div in. What I would like to happen is have a div faded in based on the speed variable and then be displayed for 15 seconds and then fadeout at the speed variable and then fade another div in at the speed variable and be displayed for 15 seconds etc. Any ideas on how to do that would be greatly appreciated? Thanks!

Answer 1

Instead of fading in, waiting, and fading out, you could make the rotate function simply fade an image out, and then fade in the next one. So start with the first image displaying already, then call setTimeout on rotate(). Example:

var speed= 1000,
num = 1,
timer = setTimeout(rotate, 15000); //15 seconds as requested

function rotate() {
    var container_footer = jQuery("#rotate_container");
    var divs_footer = container_footer.children();
    var divs_footer_length = divs_footer.length;
    $("#item"+num).fadeOut(speed);
    num>divs_footer_length  ? num=0 : num++;
    $("#item"+num).fadeIn(speed);
    timer = setTimeout(rotate, 15000);
};