javascript - 带有MxN矩阵的jQuery动画

我将一个元素分成多个块(由许多行和列定义)，然后淡出这些块以创建动画效果。动画的类型由delay()值决定:

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

在这种情况下，每个块的淡入淡出效果会延迟(30 *当前块索引)。第一个块的延迟为0，第二个块的延迟为30，最后一个块的延迟为30 *(块数)。因此，这将水平淡化所有块。

我已经发布了到目前为止在这里列出的效果列表:http://jsfiddle.net/MRPDw/。

我需要帮助的是找到螺旋型效果的延迟表达式，也许还有其他您认为可能的:D

最佳答案

这是螺旋图案的代码示例:

  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;

看到它在this fiddle中工作。

我还改进了您的“RANDOM”动画，以显示所有正方形，而不仅仅是子集。该代码是:

  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;

看到它在this fiddle中工作。