Блог

У меня есть область на белой HTML-странице, которую я хотел бы разделить на меньшие прямоугольные блоки, каждый с черным фоном, и отображать по одному черному блоку за раз при загрузке страницы, горизонтально в строках, пока область не станет полностью черной. Это только эстетическое решение, в блоках нет функциональности или другого содержимого.

При необходимости может использовать Javascript, jQuery, CSS и / или PHP. Самой простой идеей, о которой я мог подумать, была таблица CSS, в которой все ячейки имеют черный фон и атрибут CSS, visibility: hidden затем меняя каждую ячейку по очереди на visibility: visible с setTimeout?

Другой подход, о котором я мог подумать, заключается в том, чтобы вложить черный фоновый CSS div, мой черный блок, в другой div, установленный на конечный размер области, и клонировать вложенный div с помощью setTimeout до тех пор, пока родительский div не будет полностью заполнен. Я не уверен, какое решение легче, если либо.

Где я особенно застрял, так это в том, как ссылаться на каждую ячейку (или div) по очереди, и должен ли я указывать каждой ячейке черной таблицы или элементу div ссылку на идентификатор вручную, что менее гибко, или это можно сделать динамически.

Вы могли бы сделать <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, чтобы сделать его наложенным и заставить элементы занимать одинаковую высоту, чтобы заполнить экран. Демонстрация показывает все это.

Вы могли бы использовать 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);
  

Вы могли бы улучшить это, заставив автоматически определять высоту и останавливаться на соответствующем блоке вместо фиксированного количества.

Мои 0.02 доллара: я бы посоветовал вам использовать анимированный GIF-файл в качестве фона вместо блокировки выполнения с помощью setTimeout.

Как насчет того, чтобы вложить черный div в div контейнера. Сдвиньте его вниз, чтобы у него был вид убывающего горизонтального цвета?

Смотрите это: http://jsfiddle.net/fermin/sfTzP/3