單擊按鈕時如何使用Jquery動畫縮小和增長效果？

Question

如何使用jquery縮放div，並在點擊按鈕時顯示/隱藏「登錄」或「註冊」？

我想借此作爲一個例子： 參考：Scale when button is clicked

$(document).ready(function(){ 
 
\t $("#logIn").click(function(){ 
 
    \t \t $(".log-in").show(); 
 
     $(".register").hide(); 
 
    }); 
 
    
 
    $("#register").click(function(){ 
 
    \t \t $(".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>

這是我的示例代碼，將顯示「登錄」和「註冊」的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>