使用margin-right制作动画答案

【问题标题】：Animate using margin-right使用margin-right制作动画
【发布时间】：2014-12-11 11:10:38
【问题描述】：

简单的学习任务......但它不适合我。

任务很简单，我正在尝试以方形布局旋转一个框（路径：go right -> down -> left -> up）....但它在移动后没有动画down（没有't go left or up after it）这是代码：

$('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")
                    });
                });
            });
        });
    });
});

在制作动画时是否有任何适当的方法可以混合margins？请指教...

Fiddle here

【问题讨论】：

标签： jquery css jquery-animate margin

【解决方案1】：

当您使用一个属性为项目设置动画以更改其行为时，使用该属性很容易，如下所示

$('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")
                    });
                });
            });
        });
    });
});

Updated Fiddle

并且根据您的逻辑，您需要添加 -= 符号，它是它以前的值

喜欢 200

-200

差距 = 400

所以使用 -=200 现在差距是200，这是你的需要

喜欢 DEMO

【讨论】：

天哪......我的部分超级愚蠢......感谢上帝，我将我的名字从Noob改了:)

【解决方案2】：

试试这个：

$('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")
                    });
                });
            });
        });
    });
});

小提琴here

【讨论】：

【解决方案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")
                    });
                });
            });
        });
    });
});

【讨论】：