image gallery with mousehover animated effect using jquery

Step 1. HTML:
In html code, li with class="post" is very important as all the effect is base on it.  if you want to change first  make sure what you are doing.
<ul id="main">
<li class="box">
  <div class="post">
   <div class="title">
    <h2><a href="#"  title="title">title will gose here</a></h2>
   </div> 
   <span class="desc">small description will gose here small description will gose here small description will gose here small description will gose here small description will gose here small description will.....</span>
   <a href="#"><img style="display: inline-block; left: 0px; top: 0px; width: 220px;" class="bookcover" src="images/Desert.jpg" alt=""></a>
  </div>
 </li></ul></div>

Step 2.Styling  CSS:
ul #main {
    margin: 0 auto;
    width: 800px;
}

.post {
    -moz-box-shadow: 3px -2px 1px 0 #EEEEEE;
    margin: 0;
    overflow: hidden;
    position: relative;
    width:220px;
}
.title {
    left: 0;
    position: absolute;
    top: 15px;
    width: 220px;
    font-size:12px;
}
a img {
    border: none;
}
ol, ul {
    list-style: none outside none;
}
span.desc {
    bottom: 10px;
    font-size: 12px;
    left: 0;
    position: absolute;
    text-align: center;
    width: 220px;
}
div .post img {
    height: 200px;
    position: relative;
    width: 220px;
}

Step 3. Setting up jQuery

Initial Step
You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

 jQuery:

$(document).ready(function() {
$('.post').mouseenter(function(e) {
        $(this).children('a').children('img').animate({  left:'220', top:'0', width:'0'}, 300);
 
    }).mouseleave(function(e) {
        $(this).children('a').children('img').animate({ left: '0', top: '0', width:'220'}, 300);
       
    });
});