jQuery の DIV の縮小と拡張の方法

この記事の例では、DIV レイヤーを縮小および拡張する jQuery メソッドについて説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:

<頭>


<スタイル>
/* 縮小および拡大効果 */
.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{位置:相対;ボーダー:1px ソリッド #e7e7e7;}



<スクリプトタイプ="text/javascript">
// 縮小および拡大効果
$(document).ready(function(){
$(".box h1").toggle(function(){
$(this).next(".text").animate({高さ: 'toggle', opacity: 'toggle'}, "slow");
},function(){
$(this).next(".text").animate({高さ: 'toggle', opacity: 'toggle'}, "slow");
});
});

エフェクトの折りたたみと展開

1

2

3

4
5

エフェクトの折りたたみと展開

1

2

初めてページを更新してください。

この記事が皆さんの jquery プログラミング設計に役立つことを願っています。