小粋空間  -  a cheap joke and a play on words site

jQuery UIのtoggle()でjQueryのslideToggle()よりカッコよくスライドさせる方法

jQuery UIのtoggle()を使って、jQueryのslideToggle()よりカッコよくスライドさせる方法について紹介します。

ある要素をスライドさせながら表示・非表示を行うには、jQueryのslideToggle()（またはslideUp()とslideDown()）がよく知られていると思います。

が、slideToggle()ではコンテンツの動き方に個人的に不満があり、調べたところ、jQuery UIのtoggle()で期待する動作になることが分かりました。

jQuery UIのtoggle()については、公式ドキュメントのAPIで公開されているのですが、本エントリーで紹介するような詳細な指定方法が書かれていないので、備忘録で本エントリーに残しておきます。

１．jQueryのslideToggle()でスライドさせる

まず、jQueryのslideToggle()と使ったスライドのサンプルを示します。

サンプル1

サンプルのHTMLは次のとおりです（CSSは割愛）。

<input type="button" id="test" value="..." />
<div id="box">...</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $('#test').click(function(){
        $('#box').slideToggle('slow');
    });
});
</script>

サンプルの動作でお分かりのとおり、slideToggle()を使った場合、コンテンツがボックスと同期して動かない点が不満です。

このような動作は、ボックスを折りたたんだときにコンテンツがそこに残っているような印象を受けます。例えるなら「幕を上げ下げしている」といったところでしょうか。

そうではなく、コンテンツを親ボックスごとスライドさせたいのですが、slideToggle()では実現できないようです。

２．jQuery UIのtoggle()でスライドさせる

ということで、jQuery UIのtoggle()でコンテンツごとスライドさせる方法を紹介します。

サンプル2

サンプルのHTMLは次のとおりです（CSSは割愛）。赤色部分が前のサンプルとの差分です。

<input type="button" id="test" value="..." />
<div id="box">...</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function(){
    $('#test').click(function(){
        $('#box').toggle('slide', { direction: 'up' } );
    });
});
</script>

toggle()の設定方法は次のとおりです。

$('#box').toggle('slide', { direction: 'up' } );

オプションの第1パラメータにエフェクトを指定します、「slide」を指定することでslideToggle()と同じ動作になります。

エフェクトの種類については、公式APIの「Effects」に記載されている「XXX Effect」の「XXX」の部分を小文字で設定できます（どこかに一覧があったと思いますが失念）。

第2パラメータはハッシュ形式で「direction（折りたたみ方向）」を指定します。ここでは"up"を指定しているので上方向に折りたたまれます。他に"down"、"left"、 "right"を指定できます。

その他、slideエフェクトの第2パラメータには「distance（移動距離）」を指定することができます。

例えば、

$('#box').toggle('slide', { direction: 'up', distance: 200 } );

とすれば、上方向に200px動きます。数値に単位を指定するとエラーになるので気をつけましょう。

３．その他

jQuery UIのtoggle()は、jQueryのtoggle()を拡張したもので、前項以外のパラメータ（durationやcompleteなど）については同じようです。

例えば、次のようにdurationを設定すれば、1秒かけて動作するようになります。

$('#box').toggle('slide', { direction: 'up' }, 1000 );

また、jQuery UIが読み込まれなかった場合は、jQueryのtoggle()として動作します（ただし独自パラメータが指定されている場合は動作しない模様）。

４．参考サイト

• Slide Effect
• jQuery UI toggle()
• jQuery toggle()