title: jQuery change the color and text several times after .animate
body: <p>The problem is that when I click the button, div should move three times, and after each moving change the background and text, but when I do this
  div assigns only the last .css and .html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
    $("#button").click(function () {
      $(".square").animate({top: '250px'});
      $(".square").html("My friend");
      $(".square").css({
        backgroundColor: "#aa0000",
        color: "white"
      });
    //SECOND MOVE
    $(".square").animate({left: '250px'});
    $(".square").css({
      backgroundColor: "yellow",
      color: "white"
    });
    $(".square").html("NO");
    //THIRD MOVE
    $(".square").animate({top: '-10px'});
    $(".square").html("YESSSSSSSSSSSSSSS");
    //FOURTH MOVE
    $(".square").animate({left: '-10px'});
    $(".square").css({
      backgroundColor: "Black",
      color: "white"
    });
    $(".square").html("NOO")
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Here's the html:  --&gt;
  
  &lt;div id="content" class="wrapper box"&gt;
      &lt;button id="button"&gt;Go&lt;/button&gt;
      &lt;article&gt;
          &lt;div class="square"&gt;Hello&lt;/div&gt;
          &lt;div class="output"&gt;&lt;/div&gt;
      &lt;/article&gt;
      &lt;input type="text" id="number"/&gt;
      &lt;button onclick="calculate();"&gt;Check&lt;/button&gt;
      &lt;button onclick="sortArray();"&gt;Input array&lt;/button&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>