我正在尝试制作动画。我在 div 中有一些盒子。div 是相对定位的，而子元素是绝对定位的。

我试图用 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");
        });
    });
}

我遇到的问题是，动画的每一行都有 4 个框，因此我必须计算 和Offsetop，offsetLeft为此我使用了以下操作：

  1. i%4这给了我从 0 到 3 的数字（每行现在有 4 个框* 120）OffsetLeft

  2. 1/4这给了我0..1..2..等等，但是间隔为 4，这意味着当我有 4 个盒子时，偏移量会增加 1，然后加上 1，.. 依此类推。如果您希望所有行具有完全相同的顶部，则必须添加Math.floor(i/4).

例如，假设我们有盒子 7 i = 7。那么盒子 7 必须位于 4° 列的 2° 行，因为编程中的 7 等于盒子 8（从 0 到 7 编号）知道我们有：

“柱”水平移动计算 -> i%4 * 120 -> 7%4 * 120 -> 3 * 120 -> 360

对于我的练习，我们有：
0 - 1 列
120 - 2 列
240 - 3 列
360 - 4 列

“行”垂直移动计算 -> i/4 * 120 -> 7/4*120 -> 1*120 -> 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");
        });
    });
}
你能制作一个小提琴或 plunkr 来演示这一点吗？
请将解决方案添加为下面的答案部分，这比在标题中写“已解决”要好得多。
伟大的！包括一些解释问题是什么，那就完美了。:)
杰出的。:) 我认为您需要等待一段时间才能将自己的答案标记为已接受。总而言之，这是一个很好的开始 - 在网站上玩得开心！