jquery - 使用 margin-right 制作动画

Question

简单的学习待办事项......但它对我不起作用。

任务很简单，我正在尝试旋转方形布局中的盒子(路径:向右 -> 向下 -> 向左 -> 向上)....但它没有动画当它向下移动后(不会向左或向上移动)，这是代码:

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

在制作动画时是否有混合边距的正确方法？请指教...

Fiddle here

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

fiddle here