Fade out tiles one by one, then fade in

Question

I have a large 150px x 150px tile that has 9 smaller 50px x 50px tiles. I want to fade out the small tiles one by one to reveal the large tile below, then fade in each small tile one by one after about 3 seconds. This process should repeat after a pause of about 5 seconds. I have a rough prototype here:

http://jsfiddle.net/psivadasan/k34xX/1/

Appreciate any help.

Answer 1

See my code below, DEMO here

var $divs, curPointer = 0; curOpacity = 0;
function rotateDivs() {   

    $divs.eq(curPointer++).animate({opacity: curOpacity}, 1000);

    if (curPointer == $divs.length) {
        curPointer = 0;
        curOpacity = (curOpacity == 0)? 1: 0;
        setTimeout(rotateDivs, 5000);
    } else {
        setTimeout(rotateDivs, 3000);
    }
}