本文实例讲述了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程序设计有所帮助。