Question

这里的想法是在一个页面上有两个表单（或更多），例如下面的示例中显示的登录表单和重置密码表单。隐藏一个表单，直到单击链接，并且发生效果。我在这里有一个.toggle（）效果，它将loginform滑动到右边，而resetform从左边滑入。当用户单击“忘记密码”链接时会发生这种情况。

这是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>

这是我的剧本：

$(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;
    });
});

问题是由于表单是一个堆叠在另一个之上，登录表单将向左滑动到页面上方，同时重置表单从页面右下方滑入;然后resetform跳转到替换loginform位置的位置。现在我可以玩其他效果，如; .hide（）。show（）。fadeIn（）。fadeOut（）。delay（），并将效果与持续时间计时以获得更清晰的外观。但我想知道在HTML中是否有更简单的方法呢？

Answer 1

DEMO：FIDDLE

听起来你需要一个回调函数后运行第一个函数。试试这个：

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

    }

Answer 2

你可以通过CSS过渡和一点点jquery来实现你想要的东西：

＆＃13;

$(".forgot").click(function(){
    $("#wrapper").addClass("logged");

    return false;
});

$(".backToLogin").click(function(){
    $("#wrapper").removeClass("logged");

    return false;
});

＆＃13;

#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);
}

＆＃13;

<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>

＆＃13;

如何在一个页面上切换和滑动两个表单？

2 个答案: