Question

我在白色html页面上有一个区域，我想分成较小的矩形单元，每个单元都有黑色背景，并在页面加载时一次呈现一个黑色单元，水平成行，直到该区域完全变黑。这只是美学，单位内没有任何功能或其他内容。

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

我能想到的另一种方法是将黑色背景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样式以使其叠加，并使项目占据相同的高度以填满屏幕。该演示展示了所有内容。

Answer 2

您可以使用setInterval

这是一个现场演示：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);

您可以通过使其自动检测高度并停在适当的块而不是固定计数来改善这一点。

Answer 3

如何在容器div中嵌套黑色div。它是否向下滑动，使其具有水平颜色的外观？

请参阅：http://jsfiddle.net/fermin/sfTzP/3

Answer 4

我的0.02美元：我建议您使用动画gif作为背景，而不是使用setTimeout阻止执行。

CSS增量显示

4 个答案: