1、新建一个html。
2、在body加入测试的html。
3、引入jquery（我这边的jquery是下载到自己本地的，注意路径）。
4、在script标签下加入这段代码（就是jquery隐藏div的代码）。
5、没有加隐藏代码效果。
6、加了隐藏代码效果。
7、这样就可以了，贴上整个html代码。
slideUp(),slideDown()这个动画的过程只是高度的改变，和宽度或者不透明度无关。收起来的时候本来就不占位置啊，你测试一下以下代码，收起来的时候下面的按钮移上去了，不是说明它不占位置吗<style type="text/css">
#box{ width:100pxheight:100pxbackground-color:red}
</style>
<div id="box"></div>
<button onclick="_slideUp()">向上收缩</button>
<button onclick="_slideDown()">向下展开</button>
<script type="text/javascript">
function _slideUp(){
$('#box').slideUp(3000)
}
function _slideDown(){
$('#box').slideDown(3000)
}
</script>
1，你可以裁剪原图片到你想要的样子就行了2，你可以设置div的大小，然后给他加上属性overflow：hidden，就是溢出的隐藏。
3，设置文字区域为div然后覆盖掉一部分图片区域
望采纳。
