Animation function between page change

Question

I am currently having some troubles adding animation between web page change. Could someone help me?

I have a following Javascript for animation (when clicking login, login form fades out):

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

} ?>

This is the HTML form with an error field:

    <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 to check if user data is correct/incorrect. Directs to a new page (home.php) on success:

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

How can I enable click event so that on success it directs to a new page with fade out animation?

Changed .js to this:

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

You would need to make an ajax call to your php function, return whether the login is true or false, then animate if the php function returned 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';
            });
        }
    }
});

If you mean to check that the form is valid as far as fields have text in them, then postback and let the server decide what to do you would:

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

This will fade the form, submit the form after 1 second