JQuery changes color and text several times after .animate

Question

The problem is that when I press the button, the div should move three times, and after each change the background and text change, but when I do this div only assigns the last .css and .html

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

<!-- Here the html:  -->

<div id="content" class="wrapper box">
    <button id="button">Go</button>
    <article>
        <div class="square">Hello</div>
        <div class="output"></div>
    </article>
    <input type="text" id="number"/>
    <button onclick="calculate();">Check</button>
    <button onclick="sortArray();">Input array</button></div>

Run codeHide result

Answer 1

You need to add a function with each step in the animation event, which is fired after the end of each animation.

See: jQuery.animate () full function:

Try something like this:

$(document).ready(function () {
    $("#button").click(function () {

        $(".square").animate({top: '250px'}, 'slow', function() {

            $(".square").html("My friend");
            $(".square").css({
                backgroundColor: "#aa0000",
                color: "white"
            });

            //SECOND MOVE
            $(".square").animate({left: '250px'}, 'slow', function() {
                $(".square").css({
                    backgroundColor: "yellow",
                    color: "white"
                });

                $(".square").html("NO");

                //THIRD MOVE
                $(".square").animate({top: '-10px'}, 'slow', function() {
                	$(".square").html("YESSSSSSSSSSSSSSS");

                    //FOURTH MOVE
                    $(".square").animate({left: '-10px'}, 'slow', function() {
                        $(".square").css({
                            backgroundColor: "Black",
                            color: "white"
                        });
                        $(".square").html("NOO")
                    });

                });
                
            });

        });
    });
});

function calculate() { console.log("calculate");}
function sortArray() { console.log("sortArray");}

.square {
position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="wrapper box">

<button id="button">Go</button>

<article>
    <div class="square">Hello</div>
    <div class="output"></div>
</article>
<input type="text" id="number"/>
<button onclick="calculate();">Check</button>
<button onclick="sortArray();">Input array</button></div>

Run codeHide result

EDIT:

duration (), animate(), , 3000 , :

$(".square").animate({top: '250px'}, 3000, function() {