JQuery实现广告栏伸索展示

有些网站底部会有个广告栏的按钮，点击一下缩回去或者展开，主要是通过改变内容标签的css属性来实现的，这里介绍一下jquery的animate()的方法。
代码如下：
css代码：

.text{
   height:10%;
   width:10%;
}

html代码：

<div class="text">要展示的内容</div>
<button id="show">展开</button>
<button id="hide">收回</button>

js代码:

$(document).ready(function(){
   $("#show").click(function(){
   $(".text").animate({
       width:'80%',
       height:'20%'
   });
  });
  $("#hide").click(function(){
   $(".text").animate({
       width:'10%',
       height:'10%'
   });
  });
})

这里只是做一个简单的长度跟高度的变换，还可以增加其它的类似透明度opacity或者相对位置的变化，这个按个人需求效果来定，另外，按钮也不是一定的，在自己需要的位置加上相应的点击事件也可以的。