4

I'm splitting a element into multiple blocks (defined by a number of rows and columns), and then fade these blocks to create animation effects. The type of animation is decided by the delay() value:

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

In this case each block's fade effect is delayed by (30 * current block index). The first block gets 0 delay, the second block 30 delay, ..... the last block 30 * (number of blocks) delay. So this will fade all blocks horizontally.

I've posted a list of effects I've come up so far here: http://jsfiddle.net/MRPDw/.

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

2 Answers 2

4

Here is an example of 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 it working in this fiddle.

I also improved on your "RANDOM" animation, to show all the squares, not just a subset. The code for that is:

  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 it working in this fiddle.

2
  • The examples on jsFiddle are very nice, +1!
    – Ben
    Nov 18, 2011 at 8:42
  • 1
    Talking about the spiral; would look for a way to make it start from the center
    – Ben
    Nov 18, 2011 at 8:43
1

Maybe the easiest way to think about making a spiral animation, is to think about your matrix as a piece of paper.

If you fold 2 times that paper in the x and y center axes, you end up getting a smaller square (or rectangle) quadrant.

Now, if you animate this quadrant only from bottom right to top left corner (in the same way you did for your 'diagonal-reverse'), you can propagate this movement to the other 3 quadrants in order to get the final effect of having an animation running from the center of your matrix up to the 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 demo (click the spiral link)

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.