html+css资料来源于网络
项目遇到一个小问题，需要在鼠标放置在div上时，div中隐藏的图片自中间缓慢展开。
查到了两种方法，其中第二种方法能够完美解决。
1.使用jq的slide：
<script type="text/javascript" language="javascript">
$(function() {
$(".part_arrow").hover(function() {
$(this).children('a').find('.arrow_img').slideDown("slow");
},
function() {
$(this).children('a').find('.arrow_img').slideUp("slow");
});
});
</script>其中，part_arrow是一个div的class名。
这个实现的效果是在鼠标滑过名为part_arrow的div时，该div中的a元素中类名的arrow_img的元素（如p或者img）就会出现与隐藏。方向是自上到下。
问题：展开方向与需求方向不同。
2.使用css的动画：
<!DOCTYPE html>
<html>
<head>
<style>
img
{
width:100px;
background:blue;
position: absolute;
top: 50%;
height: 0px;
transition: top .5s,height .5s;
-webkit-transition: top .5s,height .5s;
}
div
{
width:100px;
height:300px;
background:blue;
}
div:hover img
{
top:0%;
height:100%;
}
</style>
</head>
<body>
<div><img src="http://img05.tooopen.com/images/20150820/tooopen_sy_139205349641.jpg"></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>当鼠标悬停在div上时图片自中间向两边拉长