JavaScript — функция анимации между сменой страницы

В настоящее время у меня возникают проблемы с добавлением анимации между сменами веб-страниц. Может ли кто-нибудь помочь мне?

У меня есть следующий 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;
}
});
});