鼠标移动上去，图片向下移动，显示出背后的内容

html页面：

<div class="wrap1">
            <div class="cover imgcrd">
                <img src="{res file=images/ggt.png}" />
            </div>
            <div class="itemlist">
                <img src="{res file=images/ILOVEYOU.jpg}" />
            </div>
</div>

css :

.wrap1{
    position:relative;
    overflow: hidden;
    height:313px;
}
.cover{
    position:absolute;
    z-index:20;
    width:278px;
    height:313px;
}
.itemlist{
    position:absolute;
    width:278px;
    height:313px;
}

js:

$(function() {
    $('.wrap1').mouseenter(function() {
        $(this).children('.cover').animate({
            top: '50px'
        },"slow")
    }).mouseleave(function() {
        $(this).children('.cover').stop().animate({
            top: '0px'
        },"slow")
    })
})