jQueryのtoggleSlideを使ってみる
2013/06/05
ボタンやリンクなどをクリックしたら、みょいーんとDIVやらpで括ってた部分を表示させるというのを実装する、jQuery のtoggleSlideを使う方法。
これも検索頻度の高いものなので、自分のメモとして残しておきます。
「クリック」ってところをクリックすると、「ここが開いて表示されるよ！」ってところが表示されるようにしてみます。
まずはこんな html を書いてみます。
|
1 2 3 4 5 6 7 |
<span id="slideClick">クリック</span> <div id="target"> ここが開いて表示されるよ！<br /> ここが開いて表示されるよ！<br /> ここが開いて表示されるよ！ </div> |
次に、javascriptです。htmlのヘッダに記述。
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> jQuery(function($){ $('#slideClick').click(function(){ $('#target').slideToggle('slow'); }); }); </script> |
もちろん、jQueryライブラリ本体をロードしてから書いてください。
ロードの方法は一つ前のポスト参照ってことで。
「slow」と書いてある所は、アニメーション速度となります。
"slow"、"normal"、"fast"、もしくは完了までの時間をミリ秒単位で指定。
例えば "1500" であれば、1.5秒かけてアニメーションが行われます。
省略された場合は、"normal" となります。
■jQuery 日本語リファレンス
slideToggle([speed], [callback]) - jQuery 日本語リファレンス
[tgAmazonItemLookup asin="4844362720" related="1"]