連載
» 2010年05月21日 00時00分 公開

連載:jQuery逆引きリファレンス:第7回 エフェクト編 (8/19)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 slideToggleメソッドは、要素の現在の状態に応じてスライドアップ⇔スライドダウンを交互に実行します。引数speedには、スライドアップ/スライドダウンを行うのにかける時間(ミリ秒)、もしくは、あらかじめ決められた値として、slow、normal、fastのいずれかを指定します。引数fncは、スライドアップ/スライドダウンが完了したときに実行するコールバック関数を表します。

 具体的な例も見てみましょう。以下は、ボタン・クリック時にアイコン画像をスライドアップ/スライドダウンする例です。

<script type="text/javascript">

$(function() {

  // ボタン・クリック時にスライドアップ/スライドダウンを実行
  $(':button').click(function() {
    $('div').slideToggle(3000);
  });
});

</script>

  ……中略……

<input type="button" value="スライドアップ/ダウン" />
<div>
  <img src="http://www.wings.msn.to/books/978-4-7981-1957-1/978-4-7981-1957-1_logo.jpg" alt="ASP.NET" />
</div>

リスト110 ボタン・クリック時にアイコン画像をスライドアップ/スライドダウンする(SlideToggle.html)
このHTMLを実際にブラウザで開く


ブラウザで開く


ボタンをクリック

リスト110の実行結果

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。