jquery 实现从上到下滑动的帘幕效果

html 部分：

<div class="img-container">
<div class="hander1">
<img src="img/inner.png" alt="" / class="hander">
<img src="img/outer.png" alt="" class="img-outer" />
</div>
<div class="hander1" style="float:right;">
<img src="img/inner.png" alt="" / class="hander">
<img src="img/outer.png" alt="" class="img-outer" />
</div>
</div>

css 部分：

.img-container .hander1{
width:318px;
height:231px;
margin-top: 15px;
margin-left: 10px;
overflow: hidden;
position: relative;
float: left;
z-index: 999;

}

.img-container img{
display: inline-block;
position: absolute;

border: 1px solid #ccc;
}

.img-container .img-outer{
display: none;
position: absolute;
top:-216px;

border: 1px solid #ccc;
}

js 部分：

$(".hander1").hover(function(){

$(this).find(".img-outer").css({
"display": "block"
}).animate({
top: "0px"
});
}).on({
mouseleave: function() {
$(this).find(".img-outer").animate({
"top": "-231px",
})
}
})