检查div是否动画，并找出div的位置

Question

I have animated my div element to move to the right side when the 'Sign in' button is clicked.

However when the sign up button is clicked I want the div to move back over to the right.

I just wanted to know if there is any way I could check to see if the div has been animated to the left.

 var $width = $("body").width() / 2;; var $animatedDiv = $(".hero-container"); $("#sign-in").click(function() { $animatedDiv = $(".hero-container").animate({ "left": $width }, "slow"); $("#welcome").html("Sign In"); $(".form").show(); }); $("#sign-up").click(function() { // if the div is on the right, then move it to the left if ($animatedDiv.is(':animated')) { $animatedDiv = $(".hero-container").animate({ "right": $width }, "slow"); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="welcome"> <div class="hero-container"> <h1 id="welcome">Welcome!</h1> <p>Welcome back</p> <button id="sign-in">Sign in</button> <button id="sign-up">Sign up</button> </div> <div class="form"> <form class="sign-in"> <h1 id="signIn-heading">Sign In</h1> <input type="text" name="email" placeholder="Email"> <input type="text" name="pass" placeholder="Password"> </form> </div> </section> 

If the div is on the right I need to move it to the left when the 'Sign up' button is clicked, therefore the sign up form will display.

Answer 1

I'm sure there are multiple ways to accomplish your goal. One simple solution is to set a variable once the animation has completed:

    var animated_pos = "left";

    var $width =  $("body").width()/2;;
    var $animatedDiv = $(".hero-container");
    $("#sign-in").click(function(){

    $(".hero-container").animate({"left": $width,done:function(){animated_pos = "left";}}, "slow");

    $("#welcome").html("Sign In");

    $(".form").show();

    });

    $("#sign-up").click(function(){

    // if the div is on the right, then move it to the left

    if(animated_pos == "left"){
$(".hero-container").animate({"right": $width,done:function(){animated_pos = "right";}}, "slow");

    }


     });