jQuery - 動畫練習的麻煩

我試圖做一個動畫。我在div裏面有一些框。 div是相對定位的，並且兒童是絕對定位的。jQuery - 動畫練習的麻煩

我想要做的與jQuery是動畫框內的div。動畫將包括當頁面收費時，每個盒子都會變成。默認情況下，CSS上的初始不透明度爲0。

並且爲此沒有問題，這裏的主要問題是我只想要4個框的「行」，然後是另一行等等。我一直在想如何做到這一點，我只能做到2行（8盒），但是當超過8行時我有問題。

幫助！謝謝！：d

function boxAnimation(){ 
    $(".num").each(function(i){ 
     delay = i *500; 
     offsetLeft = i * 120; 
     offsetTop = i * 0; 
     if(i >= 4){ 
      offsetLeft = (i-4) * 120; 
      offsetTop = 120; 
     } 
     $(this).delay(delay).animate({ 
      left:offsetLeft+"px", 
      top: offsetTop+"px" 
      }, 
      200, 
      function(){ 
      $(this).css("opacity","1"); 
     }); 
    }); 
}

來源

2015-05-28 Isma Haro

你可以做一個小提琴或plunkr證明這一點？ –

請在下面添加解決方案作爲答案部分，這比「解決」寫入標題要好得多。 – Tomalak

@Tomalak完成：D！ –

我有問題，是動畫中的每一行有4個箱子，所以我不得不來計算Offsetop，也是offsetLeft，爲我用這個操作：

i%4這使我從0到3的記數（每排有4個現在框）和* 120爲OffsetLeft
1/4這給我0..1..2..等，但間隔爲4，這意味着當我有4個盒子，然後偏移量增加1，然後加1，..等等。如果你想要所有的行都有相同的頂部，你必須添加Math.floor(i/4)。

例如，假設我們有這樣的方框七i = 7。然後，方框7必須必須進入4°列的2°行，因爲7編程等於方框8（編號從0到7）知道我們有：

「列」水平移動計算 - >則i％4 * 120 - > 7％4 * 120 - > 3 * 120 - >

對於我的練習中，我們有：
0 - 1柱
120 - 第2欄第
240 - 3 Column
360 - 4 Column

「行」垂直移動計算 - >的i/4 * 120 - > 7/4 * 120 - > 1 * 120 - >

0 - 1行
120 - 2行
240 - 3行
..

function boxAnimation(){ 
    $(".num").each(function(i){ 
     delay = i *300; 
     offsetLeft = i%4 * 120; 
     offsetTop = i/4 * 120; 
     $(this).delay(delay).animate({ 
      left:offsetLeft+"px", 
      top: offsetTop+"px" 
      }, 
      400, 
      function(){ 
      $(this).css("opacity","1"); 
     }); 
    }); 
}

來源

2015-05-28 18:23:35

jQuery - 動畫練習的麻煩

回答

相關問題