CSS增量显示

Question

我在白色html页面上有一个区域,我希望将其分成较小的矩形单元,每个单元都有黑色背景,并在页面加载时一次渲染一个黑色单元,水平成行,直到该区域完全变黑.这只是美学,单位内没有功能或其他内容.

如有必要,它可以使用Javascript,JQuery,CSS和PHP.我能想到的最简单的想法是一个CSS表,其中所有单元格都有黑色背景和CSS属性,visibility: hidden然后visibility: visible用setTimeOut 一次一个地更改每个单元格？

我能想到的另一种方法是将黑色背景CSS div(我的黑色单位)嵌套在另一个div设置为最终区域大小,并使用setTimeOut克隆嵌套div直到父div完全填满.我不确定哪种解决方案更轻.

我特别困难的是如何一次引用一个单元格(或div),以及我是否必须为每个黑色表格单元格或div单元提供一个手动ID引用,这样灵活性较差,或者是否可以完成动态.

Answer 1

你可以做<table>(我做了一个网格,但单行网格看起来也不错):

<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>

并通过JS迭代:

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

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

它支持任意数量的单元格.这是一个演示:http://jsfiddle.net/vmSNs/49/

我添加了一些CSS样式以使其叠加,并使项目占据相同的高度以填满屏幕.该演示展示了一切.