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

Question

单击“登录”按钮后，我使div元素移动到右侧。

但是，当单击“注册”按钮时，我希望div移回右侧。

我只是想知道是否有什么方法可以检查div的动画是否在左侧。

 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> 

如果div位于右侧，则在单击“注册”按钮时需要将其向左移动，因此将显示注册表格。

Answer 1

我相信有多种方法可以实现您的目标。 一种简单的解决方案是在动画完成后设置一个变量：

    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");

    }


     });