Question

Thank you in advance for any help with this problem.

The Problem:

Using Jquery I want to create a wave across these squares (below).

so squares will .fadein in this order.

0 (first square top left)

1, 8 (then the second square row 1 and the first square row 2 at the same time)

2, 9, 16 (and so on)

3, 10, 17, 24 (and so on)

4, 11, 18, 25, 32. (and so on)

I know I could manually delay each square and time the fadein but am looking for a more dynamic way to achieve this effect.

I’ll be very happy if I could be pointed in the right direction.

Answer 1

Here you go. Simple mathematic calculations with coefficient and jQuery delay function:

$('.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)
});

Code: http://jsfiddle.net/KM7UJ/2/

and slower version: http://jsfiddle.net/KM7UJ/3/