EzeR eZ EzeR eZ - 17 days ago 7
jQuery Question

jQuery change the color and text several times after .animate

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



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




Answer

You need to add a function with each step at the animate complete event wich triggers after each animation ends.

See: jQuery .animate() complete function:

Try something like this:

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

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

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

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

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

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

                    //FOURTH MOVE
                    $(".square").animate({left: '-10px'}, 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>

Comments