javascript - 页面切换之间的动画功能

Question

我目前在网页更改之间添加动画时遇到一些问题。有人可以帮助我吗？

我有以下 Javascript 动画(点击登录时，登录表单淡出):

<?php
session_start(); // Starting Session
$error=''; // Variable To Store Error Message
if(isset($_POST['submit'])) {
if(empty($_POST['username']) || empty($_POST['password'])) {
    $error = "Username or Password is invalid";
}
else {
    // Define $username and $password
    $username=$_POST['username'];
    $password=$_POST['password'];
    // Establishing Connection with Server by passing server_name, user_id and password as a parameter
    $connection = mysql_connect("localhost", "root", "");
    // To protect MySQL injection for Security purpose
    $username = stripslashes($username);
    $password = stripslashes($password);
    $username = mysql_real_escape_string($username);
    $password = mysql_real_escape_string($password);
    // Selecting Database
    $db = mysql_select_db("phplogin", $connection);
    // SQL query to fetch information of registerd users and finds user match.
    $query = mysql_query("select * from users where password='$password' AND username='$username'", $connection);
    $rows = mysql_num_rows($query);
    if($rows == 1) {
        $_SESSION['login_user']=$username; // Initializing Session
        //header("location: home.php"); // Redirecting To Home Page
    } else {
        $error = "Username or Password is invalid";
    }
    mysql_close($connection); // Closing Connection
}

} ？>

这是带有错误字段的 HTML 表单:

    <form class="form" action="" method="POST">
            <input id="username" name="username" type="text" placeholder="Username">
            <input id="password" name="password" type="password" placeholder="Password">
            <button name="submit" type="submit" id="login">
                Login
            </button>
            <span><?php echo $error; ?></span>
        </form>

Login.php 检查用户数据是否正确/不正确。成功时定向到新页面(home.php):

if($rows == 1) {
        $_SESSION['login_user']=$username; // Initializing Session
        //header("location: home.php"); // Redirecting To Home Page
    } else {
        $error = "Username or Password is invalid";
    }

如何启用点击事件，以便成功时它会定向到带有淡出动画的新页面？

将 .js 更改为:

$(document).ready(function() {
$('#loginbutton').click(function() {
    var username=$("#username").val();
    var password=$("#password").val();
    var dataString = 'username=' + username + '&password=' + password;
    if($.trim(username).length > 0 && $.trim(password).length > 0) {
        $.ajax({
            type: "POST",
            url: "login.php",
            data: dataString,
            cache: false,
            success: function(data) {
                if(data) {
                    $('.form').fadeOut(500, function() {
                        window.location.href = 'home.php';
                    });
                }
            }
        });
    } else {
        return false;
    }
});
});

Answer 1

您需要对 php 函数进行 ajax 调用，返回登录是 true 还是 false，然后在 php 函数返回 true 时进行动画处理。

$.ajax({
    type: 'POST',
    url: 'Login.php?action=verify_login',
    data: formData,
    success: function(response){
        if(response.success){
            $('.form').fadeOut(1000, function(){
                window.location.href = 'new-url.php';
            });
        }
    }
});

如果您想检查表单在字段中包含文本的范围内是否有效，则回发并让服务器决定您要执行的操作:

    var $form = $('.form');
    var $username = $('#username');
    var $password = $('#password');

    //make this validation as fancy as you want
    if($username.val() !== '' && $password.val() !== ''){
        $form.fadeOut(1000, function(){
            $form.submit();
        });
    }

这将使表单淡出，1秒后提交表单