Where would I put the next animation in JQuery?

Question

I have the following code:

$(function() {
  $("button").click(function() {
    $("#box1").animate({
      left: $(window).width() - 800
    }, {
      complete: function() {
        $("#box1").hide();
      }
    });

    $("#box2").animate({
      left: $(window).width() - 800
    }, {
      complete: function() { // complete call back
        $("#box2").hide(); // can hide or remove this element

        $("#box3").animate({
          right: $(window).width() - 200,
          top: $(window).height() - 200
        });
      }
    });
  });
});

#box1,
#box2,
#box3 {
  width: 30px;
  height: 50px;
  position: absolute;
  text-align: center;
  font-family: Times New Roman;
}

#box1 {
  background-color: skyblue;
  left: 0px;
  top: 50px;
}

#box2 {
  background-color: green;
  left: 0px;
  top: 120px;
}

#box3 {
  background-color: black;
  left: 100px;
  top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button> Start </button>

<div id="box1">
    <p> BOX 1 </p>
</div>

<div id="box2">
    <p> BOX 2 </p>
</div>

<div id="box3">
    <p> BOX 3 </p>
</div>

I want to add another complete function that occurs after box 3 moves to its new position. Box 2 will reappear and eventually move to the left. How do I do this? Where would it go in the function so it keeps going in the animation?

You can sequentially queue animations on different elements using `.queue`. See this question for multiple solutions: [How can I animate multiple elements sequentially using jQuery?](https://stackoverflow.com/questions/1218152/how-can-i-animate-multiple-elements-sequentially-using-jquery), specifically [this answer](https://stackoverflow.com/a/14221047/2181514) — freedomn-m, Apr 04 '22 at 08:23

score 0 · Answer 1 · answered Apr 04 '22 at 01:34

Add a complete callback for box3's animation that shows box2 and animates it:

$("#box3").animate({
  right: $(window).width() - 200,
  top: $(window).height() - 200
}, {
  complete: function() {
    $("#box2").show();
    // Animate box2 here...
  }
});

Where would I put the next animation in JQuery?

1 Answers1