2
jquery를 사용하여 div를 확장하고 버튼을 클릭 할 때 '로그인'또는 '등록'을 표시하거나 숨기려면 어떻게해야합니까?버튼을 클릭했을 때 Jquery를 사용하여 축소 효과 및 확대 효과를 애니메이션화하는 방법은 무엇입니까?
내가 예를 들어이 걸릴하고 싶습니다 : 참조 : 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 '등록'됩니다 내 예제 코드입니다 버튼을 클릭하면
주 : 나는 그것이 중복되지 않도록 그것을 숨길 display:none;
에 등록 사업부를 설정합니다.
이 내가 찾고 있던 것입니다. 감사합니다 @repzero. (와이) –