jQuery - 运动动画的麻烦

Question

我正在尝试制作动画。我在div里面有一些盒子。 div是相对的，孩子们是绝对的。

我尝试用jQuery做的是为div中的框设置动画。动画将包括当页面收费时，每个框将显示。默认情况下，CSS上的初始不透明度为0。

为此没有问题，这里的主要问题是我只想要＆＃34;行＆＃34; 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");
        });
    });
}

Answer 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)。

例如，假设我们有七个方框i = 7。然后方框7必须在4°列的2°行中进行，因为编程中的7等于方框8（编号从0到7）知道我们有：

“列”水平移动计算 - ＆gt; i％4 * 120 - ＆gt; 7％4 * 120 - ＆gt; 3 * 120 - ＆gt;的 360

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

“行”垂直移动计算 - ＆gt; i / 4 * 120 - ＆gt; 7/4 * 120 - ＆gt; 1 * 120 - ＆gt;的 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");
        });
    });
}