使用 margin-right 实现动画效果

Question

一个简单的学习to-do......但它对我不起作用。

任务很简单，我试图在正方形布局中旋转一个框(Path：向右走 -> 向下走 -> 向左走 -> 向上走)....但它在向下移动后不会动画化 (在这之后不会向 左 或 上 移动)，这是代码：

$('button').click(function () {
    $('.box').animate({
        "height": "40px",
            "width": "40px"
    }, 500, function () {
        $('.box').animate({
            "margin-left": "200px",  //go right
        }, 1500, function () {
            $('.box').animate({
                "margin-top": "200px", //go down
            }, 1500, function () {
                $('.box').animate({ // <===problem starts here
                    "margin-right": "200px" //go left
                    //"marginRight": "200px"
                }, 1500, function () {
                    $('.box').animate({
                        "margin-bottom": "200px" //go up
                    }, 1500, function () {
                        $('.box').css("background", "black")
                    });
                });
            });
        });
    });
});

在进行动画时，有没有适当的方法来混合 margin 值？请给予建议...

这里是演示代码

- NoobEditor

Answer 1

试试这个：

$('button').click(function () {
    $('.box').animate({
        "height": "40px",
            "width": "40px"
    }, 500, function () {
        $(this).animate({
            "margin-left": "200px",  //go right
        }, 1500, function () {
            $(this).animate({
                "margin-top": "200px", //go down
            }, 1500, function () {
                $(this).animate({ // <===problem starts here
                    "margin-left": "-=200px" //go left
                    //"marginRight": "200px"
                }, 1500, function () {
                    $(this).animate({
                        "margin-top": "-=200px" //go up
                    }, 1500, function () {
                        $(this).css("background", "black")
                    });
                });
            });
        });
    });
});

点此进入示例。

- jpcanamaque

Answer 2

当您使用一个属性对项目进行动画并改变其行为时，只需使用该属性即可轻松完成，如下所示。

$('button').click(function () {
    $('.box').animate({
        "height": "40px",
            "width": "40px"
    }, 500, function () {
        $('.box').animate({
            "margin-left": "200px",  //go right
        }, 1500, function () {
            $('.box').animate({
                "margin-top": "200px", //go down
            }, 1500, function () {
                $('.box').animate({ // <===problem starts here
                    "margin-left": "0px" //go left
                    //"marginRight": "200px"
                }, 1500, function () {
                    $('.box').animate({
                        "margin-top": "0px" //go up
                    }, 1500, function () {
                        $('.box').css("background", "black")
                    });
                });
            });
        });
    });
});

更新的演示代码

按照您的逻辑，您需要添加-=符号，以便它返回其先前的值。

例如 200

-200

差距为400

所以使用 -=200 现在差距为200，这是您的需求

就像演示中所示。

- Rituraj ratan

---

哦，天哪......我真是太蠢了......谢天谢地我没有把我的名字从“Noob”改掉 :) - NoobEditor

Answer 3

你想要从两侧推动 div，所以它一直不会向左移动。你需要设置 margin-left: 0px 向左移动并设置 margin-top: 0px 向上移动。

Fiddle 上的演示

$('button').click(function () {
    $('.box').animate({
        "height": "40px",
            "width": "40px"
    }, 500, function () {
        $('.box').animate({
            "margin-left": "200px",  //go right
        }, 1500, function () {
            $('.box').animate({
                "margin-top": "200px", //go down
            }, 1500, function () {
                $('.box').animate({ // <===problem starts here
                    "margin-left": "0px" //go left
                    //"marginRight": "200px"
                }, 1500, function () {
                    $('.box').animate({
                        "margin-top": "0px" //go up
                    }, 1500, function () {
                        $('.box').css("background", "black")
                    });
                });
            });
        });
    });
});

- Weafs.py