html页面内容的收缩和展开效果,jquery简单实现网页层的展开与收缩效果

本文实例讲述了jquery简单实现网页层的展开与收缩效果。分享给大家供大家参考。具体如下：

这里演示了jquery网页层展开、层收缩代码，带缓冲动画效果，点击指定的文字或按钮，可展开指定层，再次单击会收起层，类似效果网上已见到许多，请根据自己的需要修改代码，别忘了引入最新的jQuery插件哦。

运行效果截图如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Div层的收缩与展开

#content {

font-size: 14px;

width: 730px;

height: 25px;

background:#FFF; line-height:25px;

border: 1px #ccc double;

overflow: hidden;

border:1px solid #99a5ab;

}

#key {

color: red;

float: right;

width:50px;

height:25px;

line-height:25px

margin:0 0 0 0;

}

$(function(){

$("#key").toggle(function(){

$(this).html("关闭").parent().animate({height:"280px"},1000);

},function(){

$(this).html("展开").parent().animate({height:"25px"},1000);

})

})

展开 标题

1

2

2

2

2

2

2

2

希望本文所述对大家的jquery程序设计有所帮助。