jQuery - one click, multiple function, after each other-CodePudding

I have a page where I would like to use a button for slide an element (it covers the other things under) After that happens, I would like to use another animation as well - on the place that now we can see. Plus all things depend on the screen's size. :D

The problem is that the two main things (animation of the cover with click and animation of the under things) happen at the same time. If I use delay, the second animation starts - independently from the clicking. How can I re-write this code in order to after the actual clicking happens, the first animation go, and after that the second animation as well?

else {
$("#lock").click(function(){
    opener();
});
  $(function animation(){
    $(".territory").delay(3000).animate({
              width: "100vw"
          }), "slow";
    $(".territory").animate({
              height: "100vh"
          });
  });
}

Thank you for your help! :)

CodePudding user response：

Put the second animation in the callback function of the first one.

$(function animation() {
  $(".territory").delay(3000).animate({
      width: "100vw"
    }, "slow",
    function() {
      $(".territory").animate({
        height: "100vh"
      });
    })
});