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

    }


     });

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

1 个答案: