自动往下伸展开和收缩的动态图层效果

<style>
#content {
font-size: 14px;
width: 200px;
height: 50px;
background: #eee;
padding: 10px;
border: 4px #ccc double;
overflow: hidden;
}
#key {
color: red;
float: right;
margin-top: -20px;
}
</style>
<script>
var s=5;
var minheight=50;
var maxheight=400;
function shoppingcat(){
var key = document.getElementById("key").innerText;
if(content.style.pixelHeight==0)content.style.pixelHeight=minheight;
if(key=="展开"){
content.style.pixelHeight+=s;
if(content.style.pixelHeight<maxheight){
setTimeout("shoppingcat();",1);
}else{
document.getElementById("key").innerText="关闭";
}
}else{
content.style.pixelHeight-=s;
if(content.style.pixelHeight>minheight){
setTimeout("shoppingcat();",1);
}else{
document.getElementById("key").innerText="展开";
}
}
}
</script>
<div id="content">
试试
<span id="key" οnclick="shoppingcat();">展开</span><br><br>
试试效果。<br><br>
1111111111111111111111111br>
2222222222222222222br>
33333333333333333br>
4444444444。<br>
5555555，<br>
6666666，<br>
7777777。<br><br>
888888，<br>
9999999。<br>
12121212，<br>
232323232
23232334343，<br>
4534534，<br>
65756765756
</div>