收缩和展开效果

2012-11-18 23:50:00

<head>

<title>收缩展开效果</title>

<style>

/* 收缩展开效果 */

.text{line-height:22px;padding:0 6px;color:#666;}

.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}

.box{position:relative;border:1px solid #e7e7e7;}

</style>

</head>

<body>

// 收缩展开效果

$(document).ready(function(){

$(".box h1").toggle(function(){

$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

},function(){

$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

});

</script>

<h1>收缩展开效果</h1>

1<br />

2<br />

3<br />

4<br />

5<br />

</div>

<br />

</body>

</html>

继续阅读