单击按钮时如何使用 Jquery 设置缩小和增大效果的动画？

Question

单击按钮时如何使用 jquery 和 show/hide 'log-in' 或 'register' 缩放 div？

$(document).ready(function(){
 $("#logIn").click(function(){
    $(".log-in").show();
      $(".register").hide();
  });
  
  $("#register").click(function(){
    $(".register").show();
      $(".log-in").hide();
  });
  
});

.login-register {width: 500px;display: block;margin: 0 auto;}
.login-register nav{ padding: 0;background:red;}
.login-register nav ul {padding:0; margin:0 auto;}
.login-register nav ul li{display: inline-block; vertical-align: middle; position: relative; margin: 0 10px;}
.login-register nav ul li a{text-decoration:none; display: block; padding:17px 24px; color: #fff;transition: all 0.3s linear; -webkit-transition: all 0.3s linear; background:green;border-radius: 10px 10px 0 0;}


.log-in {text-align:center; background:antiquewhite;}
.log-in input {display:block; margin: 0 auto;}

.register {text-align:center; background:antiquewhite; display:none;}
.register input {display:block; margin: 0 auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="login-register">
  <nav>
    <ul>
      <li><a id="logIn" href="#">Log In</a></li>
      <li><a id="register" href="#">Register</a></li>
    </ul>
  </nav>
  
  <div class="log-in">
    <input type="text" name="username"  placeholder="Username*">
    <input type="text" name="password" placeholder="Password*">
    <input type="submit" name="submit" value="Log In">
  </div>
  
    <div class="register">
    <input type="text" name="firstname"  placeholder="First Name*">
    <input type="text" name="lastname" placeholder="Last Name*">
    <input type="submit" name="submit" value="Sign Up">
  </div>
</div>

这是我的示例代码，将在单击按钮时显示 'log-in' 和 'register' div。

注意：我把寄存器div设置为display:none;隐藏了，这样就不会重叠了。

Answer 1

$(document).ready(function() {
  $("#logIn").click(function() {
    $(".register").addClass("zoomout");
    $(".register").on("transitionend", function() {
      if ($(".register").hasClass("zoomout"))
        $(".log-in").removeClass("zoomout");
    })

  });

  $("#register").click(function() {
    $(".log-in").addClass("zoomout");
    $(".log-in").on('transitionend', function() {
      if ($(".log-in").hasClass("zoomout"))
        $(".register").removeClass("zoomout");
    })


  });

});

.login-register {
  width: 500px;
  display: block;
  margin: 0 auto;
  position: relative;
}

.login-register nav {
  padding: 0;
  background: red;
}

.login-register nav ul {
  padding: 0;
  margin: 0 auto;
}

.login-register nav ul li {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin: 0 10px;
}

.login-register nav ul li a {
  text-decoration: none;
  display: block;
  padding: 17px 24px;
  color: #fff;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  background: green;
  border-radius: 10px 10px 0 0;
}

.log-in {
  text-align: center;
  background: antiquewhite;
}

.log-in input {
  display: block;
  margin: 0 auto;
}

.register {
  text-align: center;
  background: antiquewhite;
}

.register input {
  display: block;
  margin: 0 auto;
}

.log-in,
.register {
  transition: all 0.5s;
  transform: scale(1);
  position: absolute;
  left: 0;
  width: 100%;
}

.zoomout {
  transform: scale(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="login-register">
  <nav>
    <ul>
      <li><a id="logIn" href="#">Log In</a></li>
      <li><a id="register" href="#">Register</a></li>
    </ul>
  </nav>

  <div class="log-in">
    <input type="text" name="username" placeholder="Username*">
    <input type="text" name="password" placeholder="Password*">
    <input type="submit" name="submit" value="Log In">
  </div>

  <div class="register zoomout">
    <input type="text" name="firstname" placeholder="First Name*">
    <input type="text" name="lastname" placeholder="Last Name*">
    <input type="submit" name="submit" value="Sign Up">
  </div>
</div>

单击按钮时如何使用 Jquery 设置缩小和增大效果的动画？

How to animate shrinking and growing effect using Jquery when button is clicked?

html

css

jquery

jquery-animate