Animations

Java Old Method:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('.box').hover(function(){
        $(this).stop().animate({
            top: '20px'
        }, 300);
    }, function(){
        $(this).stop().animate({
            top: '0'
        }, 300);
    });
});
</script>
<style type="text/css">
.box {
position: relative;
}
</style>
 
<div class="box">
    <!--CONTENT-->
</div>

CSS3 Method:

<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>
 
<div class="box">
    <!--CONTENT-->
</div>