［jQuery］スライドして表示を切り替える slideUp( )/ slideDown( )/ slideToggle()
slideUp( ) と slideDown( )
指定した要素の高さを０から本来の高さにするのがslideDown( )、反対に本来の高さから０にするのがslideUp( )です
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
＄（セレクター）.slideUp（スピード, コールバック関数）;
＄（セレクター）.slideDown（スピード, コールバック関数）;
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
表示状態
クリックすると非表示状態に
$(function(){
$('dt').click(function(){
if( $('dd').css('display')=='block'){
$('dd:not(:animated)').slideUp('slow'); ※１
} else {
$('dd').slideDown('slow');
}
});
});
※１ セレクターddに:not(:animated)を付加して、アニメーション処理中には他の操作を受け付けないようにしている
HTML
<body>
<dl>
<dt>スライドして表示状態を切り替える
<dd>slideDown()とslideUp()はスライドアニメーションで表示・非表示状態を切り替える命令です</dd>
</dt>
</dl>
</body>
dl{
width: 350px;
margin: 20px auto;
}
dl dt {
background: #019FA6;
line-height: 40px;
text-align: center;
cursor : pointer; ※２
}
※２ dt要素にマウスを移動するとカーソルがポインターになり、クリックできることを見えやすくしている
dl dd {
border: 1px solid #019FA6;
height: 200px;
padding: 20px;
}
slideToggle( )
slideUp( )とslideDown( )はｉｆ文で条件分岐をしなければならないのですが、slideToggle( )を使うと１行で同じ内容を命令できます。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
$（セレクタ）.slideToggle（スピード, コールバック関数）;
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
下のスクリプトの処理内容は上の例と全く同じです。
$(function(){
$('dt').click(function(){
$('dd:not(:animated)').slideToggle(1000);
});
});
