آموزش ساخت فرم ورود و ثبت نام hide-show با جی کوئری

    <div class="main">
        <div class="login">
            <h3>Login</h3>
            <form method="post" action="">
                <input type="email" placeholder="Email">
                <input type="password" placeholder="password">
                <a href="#" id="login2">Login</a>
                <a href="#" id="signup">signup</a>
            </form>
        </div>
        <div class="signup">
            <h3>signup</h3>
            <form method="post" action="">
                <input type="email" placeholder="Email">
                <input type="password" placeholder="password">
                <input type="password" placeholder="confirm passwprd">
                <a href="#" id="login">Login</a>
                <a href="#" id="signup2">signup</a>
            </form>
        </div>
    </div>

 body {
    background-color: gray;
}
.main {
    position: relative;
    margin-top: 100px;
}
h3 {
    text-align: center
}
.login , .signup {
    width: 300px;
    background-color: #ffffff;
    padding: 20px;
    position: absolute;
    left: 50%;
    margin-left: -180px;
}
.signup {
    display: none;
}
input [type=email] , [type=password] {
    width: 100%;
    margin-top: 10px;
    height: 20px;
}

 $(document).ready(function(){
            $('#signup').click(function(){
                $('.login').animate({top:'200px'})
                $('.signup').animate({top:'0'})
                $('.login').hide(300,function(){
                    $('.signup').show(300);
                });
            })
            $('#login').click(function(){
                $('.signup').animate({top:'200px'})
                $('.login').animate({top:'0'})
                $('.signup').hide(300,function(){
                    $('.login').show(300);
                });
            })
        })