検索
連載

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

jQueryの大きな特徴の1つは簡単なコードで実現可能なさまざまなアニメーションだ。アニメーション用メソッドをまとめた、すぐに役立つ18本を一挙公開。

Share
Tweet
LINE
Hatena



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

連載目次


 toggleメソッドは、要素の現在の状態に応じて、表示状態⇔非表示状態を交互に切り替えます。引数speedには、非表示になるまでの時間(ミリ秒)、もしくは、あらかじめ決められた値として、slow、normal、fastのいずれかを指定します。引数fncは、要素が表示状態になったときに実行するコールバック関数を表します。

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

<script type="text/javascript">

$(function() {

  // ボタン・クリック時に表示/非表示を切り替え
  $(':button').click(function() {
    $('div').toggle(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>

リスト106 ボタン・クリック時にアイコン画像を表示/非表示にする(Toggle.html)
このHTMLを実際にブラウザで開く


ブラウザで開く


ボタンをクリック


リスト106の実行結果

 引数speedが省略された場合、showメソッドはアニメーション効果を適用することなく、すぐに対象の要素の表示状態を変更します。

Copyright© Digital Advantage Corp. All Rights Reserved.

ページトップに戻る