How do I toggle and slide two forms on one page?

Question

The idea here is to have two forms (or more) on one page, such as a Login Form and Reset Password Form show here in the example below. One form is hidden until a link is click, and and effect takes place. What I have here is a .toggle() effect which slides the loginform to the right, while the resetform is sliding in from the left. This occurs when the user clicks on the Forgot Your Password link.

Here is the HTML:

<div id="wrapper">
    <!--LOGIN FORM BEGIN-->
    <form id="loginform" action="login.php">
        <fieldset>
            <legend>Log In Here!</legend>
            <label>Email Address:</label>
            <input type="text" id="email" maxlength="88" placeholder="myemail@example.com" />
            <label>Password:</label>
            <input type="password" id="password" maxlength="100" placeholder="password" />
            <br />
            <br />
            <input type="submit" value="Log In" id="login" />
            <br />
            <br /> <span style="font-size:16px;"><a href="resetPassword.php" class="forgot">Forgot Your Password?</a></span> 
        </fieldset>
    </form>
    <!-- LOGIN FORM END-->
    <!-- REST PASSWORD FORM BEGIN-->
    <form id="resetform" action="resetPassword.php">
        <fieldset>
            <legend>Forgot Password?</legend>
            <label>Enter Your Email Address:</label>
            <input type="text" id="forgotpass" maxlength="88" placeholder="myemail@example.com" />
            <br />
            <input type="submit" value="Generate Password" id="GeneratePassword" />
            <br />
            <br /> <span style="font-size:16px;"><a href="login.php" class="backToLogin">Back to Login</a></span> 
        </fieldset>
    </form>
    <!-- RESEST PASSWORD FORM END-->
</div>

Here is my script:

$(document).ready(function () {
    $('#resetform').hide();
    $('a.forgot').click(function () {
        var page = $(this).attr('href').split(/\?/)[1];
        $.ajax({
            type: 'POST',
            url: 'resetPassword.php',
            data: page,
            success: function () {
                $('#loginform').toggle('slide', {
                    direction: 'left'
                });
                $('#resetform').toggle('slide', {
                    direction: 'right'
                });
            }
        });
        return false;
    });
});

The problem is since the forms are stacked one on top of another, the loginform will slide left higher up on the page, the same time the resetform is sliding in from the right lower down on the page; then the resetform jumps up into the position replacing the loginform's position. Now I can play around with other effects such as; .hide() .show() .fadeIn() .fadeOut() .delay(), and time the effects with duration to achieve a cleaner look. But I was wondering if there is a simpler way of doing this in the HTML?

Answer 1

You can achieve what you are looking for with CSS transitions and a little jquery:

$(".forgot").click(function(){
    $("#wrapper").addClass("logged");

    return false;
});

$(".backToLogin").click(function(){
    $("#wrapper").removeClass("logged");

    return false;
});

#wrapper {
    overflow:hidden;
    position:relative;
    width:300px;
    height:500px;
}

#wrapper form{
    position:absolute;
    width:100%;    
    transition: all 2s ease;
}

#resetform
{
    transform: translateX(305px);
}

.logged #resetform
{
    transform: translateX(0px);
}

.logged #loginform
{
   transform: translateX(-305px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <!--LOGIN FORM BEGIN-->
    <form id="loginform" action="login.php">
        <fieldset>
            <legend>Log In Here!</legend>
            <label>Email Address:</label>
            <input type="text" id="email" maxlength="88" placeholder="myemail@example.com" />
            <label>Password:</label>
            <input type="password" id="password" maxlength="100" placeholder="password" />
            <br />
            <br />
            <input type="submit" value="Log In" id="login" />
            <br />
            <br /> <span style="font-size:16px;"><a href="resetPassword.php" class="forgot">Forgot Your Password?</a></span> 
        </fieldset>
    </form>
    <!-- LOGIN FORM END-->
    <!-- REST PASSWORD FORM BEGIN-->
    <form id="resetform" action="resetPassword.php">
        <fieldset>
            <legend>Forgot Password?</legend>
            <label>Enter Your Email Address:</label>
            <input type="text" id="forgotpass" maxlength="88" placeholder="myemail@example.com" />
            <br />
            <input type="submit" value="Generate Password" id="GeneratePassword" />
            <br />
            <br /> <span style="font-size:16px;"><a href="login.php" class="backToLogin">Back to Login</a></span> 
        </fieldset>
    </form>
    <!-- RESEST PASSWORD FORM END-->
</div>

Answer 2

DEMO: FIDDLE

Sounds like you need a callback function after the first one is run. Try this:

    success: function () {
        $('#loginform').toggle('slide', {
            direction: 'left',
            complete: function(){
                 $('#resetform').toggle('slide', {
                     direction: 'right'
                 });
            }
        });

    }