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

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

Posted at April 4,2013 12:03 AM
Tag:[jQuery, jQueryUI, slide]

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

jQuery UI

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

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

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

1.jQueryのslideToggle()でスライドさせる

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

サンプル1
サンプル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()では実現できないようです。

2.jQuery UIのtoggle()でスライドさせる

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

サンプル2
サンプル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 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動きます。数値に単位を指定するとエラーになるので気をつけましょう。

3.その他

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

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

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


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

4.参考サイト

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)