jQueryゼロから / slideUp, slideDown (クリックで開いたり閉じたり)


ちょっとアニメーションぽい事を。
使いすぎるとウザイ、SlideUpとSlideDown。

1
2
<span id="slide">ここをクリック</span>
<p id="target" style="display: none;">なんか表示</p>

マウスクリックで閉じたり開いたりします。
jQuery ではアニメーションの速度を “slow”, “normal”, “fast” で指定できます。

1
2
3
4
5
6
7
$('#slide').click(function(){
    if ($('#target').css('display') == 'none') {
        $('#target').slideDown('slow');
    } else {
        $('#target').slideUp('fast');
    }
});

$(‘#target’).css(‘display’) でスタイルシートの display の状態を取得して、それにより処理を if 〜 else 文で分岐しています。

サンプル

2011.07.10 追記
単に開いたり閉じたりするなら slideToggle 使うと楽です。
jQueryゼロから / toggleSlide

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です