title: Animate using margin-right
body: <p>Simple to-do for learning..... but its not working for me.</p>
  
  <p>Task is simple, I am trying to rotate a box in square layout(Path : <code>go right -&gt; down -&gt; left -&gt; up</code>)....<strong>but its not animating after it moves <code>down</code></strong> (<em>doesn't go <code>left</code> or <code>up</code> after it</em>) this is the code :</p>
  
  <pre><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({ // &lt;===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")
                      });
                  });
              });
          });
      });
  });
  </code></pre>
  
  <p>Is there any proper way to mix <code>margin</code>s while animating? Please advise...</p>
  
  <p><a href="http://jsfiddle.net/p9xv7xv3/4/" rel="nofollow"><strong>Fiddle here</strong></a></p>