<?php
//enable visitors to see the PHP source code of current file
$me basename($_SERVER['PHP_SELF']);
if(isset(
$_GET['showPHP'])){
    
show_source("$me");    
    die();
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link href="assets/css.css" type="text/css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>javascript Chain-able transition</title>

<?php 
include("includes/header.inc.php");
?>

<!--This meta element defines a description of my page:-->
<meta name="description" content="jQuery Chain-able transition effects of scaling and fading" /> 

<!--This meta element defines searched keywords:-->
<meta name="keywords" content="javascript, Chain-able, transition, Jonas, Grolin" /> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    $(".run").click(function(){
    
        $("#box").animate({opacity: "0.1", left: "+=300"}, 1200)
        .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
        .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
        .animate({top: "0"}, "fast")
        .slideUp()
        .slideDown("slow")
        .animate({opacity: "0.1", left: "+=500"}, 600)
        .animate({opacity: "0.4", top: "+=240", height: "60", width: "60"}, "fast")
        .animate({opacity: "1", left: "0", height: "150", width: "150"}, "fast")
        .animate({top: "0"}, "fast")
        .slideUp()
        .slideDown("slow")

        return false;
    });
});
</script>

</head>
<body>
<div id="wrapper">
<?php 
include("includes/top-navigation.inc.php");
?>

    <div id="center-box">
<?php 
include("includes/header_img.inc.php");
?>
        <div id="left-right-padding">
<?php 
include("includes/navigation.inc.php");
?>
            <div style="clear: left;"></div>
        
            <h1>jQuery Chain-able transition effects like scaling and fading</h1>
        
            <p><a href="#box" class="run">Run</a></p>
            <div id="box"></div>
            <br/>
            <br/>
         </div>
        <br/>
        <br/>          
    
<?php 
include("includes/footer.inc.php");
?>
       
    </div>
</div>
</body>
</html>