<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head><title></title>
  
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="jquery.transform-0.9.0.min.js"></script>
  <script type="text/javascript" src="jquery.easing.1.3.js"></script>
 <script type="text/javascript">
  
  $(function(){
     var zindex = 1;
     $(".red").each(function(index){
       var curr = $(this);
       curr.text(index);
       curr.hide();
       curr.delay(index * 100).fadeIn("slow");
       curr.click(function(){
         //alert(index);
       });
       curr.scale = 1;
       curr.scaleDest = 1;
       curr.mouseenter(function(){
         curr.scaleDest = 1.5;
         curr.css("z-index", zindex);
         zindex++;
       });
       curr.mouseleave(function(){
         curr.scaleDest = 1;
       });
       
       setInterval(function(){
         curr.scale += (curr.scaleDest - curr.scale) / 4;
         curr.transform({scale : curr.scale});
       },30);
     });
  });
  </script>
  <style type="text/css">
 
     #boxes{
       position: relative;
       top:100px;
       width : 500px;
       margin-left: auto;
       margin-right: auto;
       
     }
    .red{
      position: relative;
      float : left;
      margin: 10px;
      width:100px;
      height:100px;
      background-color: #FF0000;
      border : 1px solid black;
      cursor : pointer;
    }
    
  </style>
  </head>
  
  <body>
  
     
      <div id="boxes">
      <?php
		  for ($i = 0; $i<12; $i++){
			echo "<div class='red' ></div>";
		  }
      ?>
      </div>
      
    
  </body>
</html>
