MxN行列を使用したjQueryアニメーション

Question

複数のブロック（複数の行と列で定義）に要素を分割してから、これらのブロックをフェードしてアニメーション効果を作成します。各ブロックのフェード効果が（30 *現在のブロックインデックス）だけ遅延され

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

ここで：アニメーションの種類はdelay()値によって決定されます。最初のブロックは0の遅延を、2番目のブロック30の遅延は、最後のブロック30 *（ブロックの数）の遅延になります。これにより、すべてのブロックが水平方向に消えてしまいます。

これまでのエフェクトのリストは、http://jsfiddle.net/MRPDw/です。私は助けを必要と何

スパイラル型効果の遅延表現を見つけることです、そして多分あなたは可能だと思う他の人：D

Answer 1

は螺旋パターンのコードの例です：

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での作業を参照してください。

「ランダム」アニメーションを改善して、サブセットだけでなくすべての四角形を表示することもできました。そのコードは次のとおりです。

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で作業してください。

Answer 2

はたぶんスパイラルアニメーションを作りについて考えるための最も簡単な方法は、考えることですあなたの行列について、紙として。

xとyの中心軸で2倍の紙を折ると、より小さな正方形（または長方形）の四分円が得られます。

この象限を右下から左上隅までアニメーション化すると（「対角反転」の場合と同じように）、この動きを他の3象限に伝播してマトリックスの中心から四隅までのアニメーションを実行する最終的な効果。ここで

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

ここdemo（スパイラルリンクをクリックしてください）