CSS Incremental display

I have an area on a white html page that I would like to divide into smaller rectangular units each with a black background and render one black unit at a time on page load, horizontally in rows, until the area is completely black. This is aesthetic only, there is no functionali开发者_高级运维ty or other content within the units.

It can use Javascript, JQuery, CSS and or PHP if necessary. The simplest idea I could think of was a CSS table in which all cells have a black background and a CSS attribute visibility: hidden then changing each cell one at a time to visibility: visible with a setTimeOut?

The other approach I could think of is nesting a black background CSS div, my black unit, within another div set to the final area size and cloning the nested div with setTimeOut until the parent div is completely full. I'm not sure which solution is lighter if either.

Where I'm particularly stuck is how to reference each cell (or div) one at a time, and whether I have to give each black table cell or div unit a manual id reference, which is less flexible, or whether it can be done dynamically.

You could make <table> (I made a grid, but single-row grids look nice too):

<table>
    <tr><td>The</td></tr>
    <tr><td>Monkeys</td></tr>
    <tr><td>Are</td></tr>
    <tr><td>Loading</td></tr>
    <tr><td>The</td></tr>
    <tr><td>HTML</td></tr>
</table>

And iterate via JS:

animateNext($('table tr td'));

function animateNext(items) {
    items.eq(0).animate({opacity: 1}, 300, function() {
        animateNext(items.slice(1));
    });
}

It supports an arbitrary number of cells. Here's a demo: http://jsfiddle.net/vmSNs/49/

I added some CSS styles to make it overlay, and make the items take up identical heights to fill up the screen. The demo shows it all.

You could use a setInterval

Here's a live demo : http://jsfiddle.net/jomanlk/9gp3C/1/

var blocks = 10

var t = setInterval(function(){
    if (blocks) {
        $block = $('<div>').addClass('block')
        $('#cont').append($block);
        $block.fadeIn();
        blocks--;
    } else {
        clearInterval(t);
    }

}, 500);

You could improve this by making it autodetect the height and stop at the appropriate block instead of having a fixed count.

My $0.02: I would suggest you to use an animated gif as a background instead of blocking the execution with the setTimeout.

How about you nest a black div within the container div. Have it slide down so it has the appearance of horizontal colour coming down?

See this: http://jsfiddle.net/fermin/sfTzP/3