Animate using margin-right

Question

Simple to-do for learning..... but its not working for me.

Task is simple, I am trying to rotate a box in square layout(Path : go right -> down -> left -> up)....but its not animating after it moves down (doesn't go left or up after it) this is the code :

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

Is there any proper way to mix margins while animating? Please advise...

Fiddle here

Answer 1

Try this:

$('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

Answer 2

when you animate a item with one property the to change its behavior use that property it will easy like below

$('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

and as per your logic you need to add -= sign by which it come its previous value

like 200

-200

gap is = 400

so use -=200 now gap is 200 and its your need

like as DEMO