Geek Answers Handbook

JQuery MxN matrix animations

I split the element into several blocks (determined by the number of rows and columns), and then fade out these blocks to create animation effects. The type of animation is determined by the value of delay() :

 $('.block').each(function (i) { $(this).stop().delay(30 * i).animate({ 'opacity': 1 }, { duration: 420 }); });

In this case, each block attenuation effect is delayed (index of the current index is 30 *). The first block receives 0 delay, the second delay of block 30, ..... the last block 30 * (number of blocks) of the delay. Thus, this will lead to the gradual disappearance of all blocks horizontally.

I posted a list of effects that I have come up with so far: http://jsfiddle.net/MRPDw/ .

I need help to find the delay expression for the spiral type effect, and maybe others that you think are possible: D

+4
source share
2 answers

Here is a sample code for a spiral pattern:

  case 'spiral': $('.block', grid).css({ 'opacity': 0 }); var order = new Array(); var rows2 = rows/2, x, y, z, n=0; for (z = 0; z < rows2; z++){ y = z; for (x = z; x < cols - z - 1; x++) { order[n++] = y * cols + x; } x = cols - z - 1; for (y = z; y < rows - z - 1; y++) { order[n++] = y * cols + x; } y = rows - z - 1; for (x = cols - z - 1; x > z; x--) { order[n++] = y * cols + x; } x = z; for (y = rows - z - 1; y > z; y--) { order[n++] = y * cols + x; } } for (var m = 0; m < n; m++) { $('.block-' + order[m], grid).stop().delay(100*m).animate({ opacity: 1 }, { duration: 420, complete: (m != n - 1) || function () { alert('done'); } }); } break;

See how this script works.

I also enhanced your "RANDOM" animation to show all the squares, not just a subset. Code for this:

  case 'random': var order = new Array(); var numbers = new Array(); var x, y, n=0, m=0, ncells = rows*cols; for (y = 0; y < rows; y++){ for (x = 0; x < cols; x++){ numbers[n] = n++; } } while(m < ncells){ n = Math.floor(Math.random()*ncells); if (numbers[n] != -1){ order[m++] = n; numbers[n] = -1; } } $('.block', grid).css({ 'opacity': 0 }); for (var m = 0; m < ncells; m++) { $('.block-' + order[m], grid).stop().delay(100*m).animate({ opacity: 1 }, { duration: 420, complete: (m != ncells - 1) || function () { alert('done'); } }); } break;

See how this script works.

+4
source

Perhaps the easiest way to think about creating spiral animation is to think of your matrix as paper.

If you fold this paper 2 times in the central axes x and y, you get a square of a smaller square (or rectangle).

Now, if you animate this quadrant only from the lower right upper left corner (in the same way as for your “diagonal retrace”), you can extend this motion to the other 3 quadrants to get the final effect of the animation running from the center your matrix to four corners.

 case 'spiral': $('.block', grid).css({ 'opacity': 0 }); n = 0; var center = { x: cols / 2, y: rows / 2 }; // iterate on the second quadrant only for (var y = 0; y < center.y; y++) for (var x = 0; x < center.x; x++) { // and apply the animation to all quadrants, by using the multiple jQuery selector $('.block-' + (y * rows + x) + ', ' + // 2nd quadrant '.block-' + (y * rows + cols - x - 1) + ', ' + // 1st quadrant '.block-' + ((rows - y - 1) * rows + x) + ', ' + // 3rd quadrant '.block-' + ((rows - y - 1) * rows + cols - x - 1) // 4th quadrant , grid).stop().delay(100 * (center.y - y + center.x - x)).animate({ opacity: 1 }, { duration: 420, complete: function () { if (++n == rows * cols) { alert('done'); // fire next animation... } } }); }

Here is the daemon (click on the spiral link)

+1
source

More articles:


All Articles