Jquery: попытка закрасить квадраты сетки в определенном порядке - PullRequest
Новая
       8

Jquery: попытка закрасить квадраты сетки в определенном порядке

2 голосов
/ 13 декабря 2011

Заранее спасибо за любую помощь в решении этой проблемы.

Проблема:

Используя Jquery, я хочу создать волну на этих квадратах (ниже).

поэтому квадраты будут .fadein в этом порядке.

0 (первый квадрат слева вверху)

1, 8 (затем второй квадратный ряд 1 и первый квадратный ряд 2 одновременно)

2, 9, 16 (и т. Д.)

3, 10, 17, 24 (и т. Д.)

4, 11, 18, 25, 32. (и т. Д.)

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

Я буду очень счастлив, если меня направят в правильном направлении.

the grid

1 Ответ

5 голосов
/ 13 декабря 2011

Вот, пожалуйста. Простые математические вычисления с коэффициентом и функцией jQuery delay: 

$('.container div').fadeTo(0,0).each(function(index) {
    var dif = index % 8;
    var lambda = parseInt(index / 8);
    $(this).text(index);
    $(this).delay(40 * (dif + lambda)).css('visibility','visible').fadeTo(80,1)
});

Код: http://jsfiddle.net/KM7UJ/2/

и более медленная версия: http://jsfiddle.net/KM7UJ/3/

...