Question

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

任务很简单，我试图在方形布局中旋转一个方框（路径：go right -> down -> left -> up）.... 但它移动down后没有动画（ 不会left或up之后）这是代码：

$('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？请指教......

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

小提琴here

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

Updated Fiddle

根据您的逻辑，您需要添加-=符号，使其达到之前的值

像 200

-200

缺口= 400

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

与 DEMO

一样

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

使用margin-right进行动画处理

3 个答案:

Fiddle