検索
連載

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

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

Share
Tweet
LINE
Hatena



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

連載目次


 toggle(switch)メソッドは、引数switchがtrueの場合は要素を表示状態に、falseの場合は非表示状態にします。標準的なtoggle([speed [,fnc]])メソッドの挙動は要素の表示/非表示を交互に切り替えますが、アプリケーション側で任意のルールを設定したい場合などにはtoggle(switch)メソッドを使用します。

 具体的な例を見てみましょう。以下は、画像の表示/非表示を乱数でランダムに決定するサンプルです。0〜100の乱数を生成し、それが偶数であった場合には画像を表示状態に、奇数の場合は非表示状態にします。

<script type="text/javascript">

$(function() {

  $(':button').click(function() {

    // 0〜100の乱数を求める
    var tmp = Math.ceil((Math.random() * 100));

    // 乱数が偶数/奇数であるかによって表示/非表示を決定
    $('div').toggle(tmp % 2 == 0);
  });
});

</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>
</body>

リスト107 画像の表示/非表示をランダムに決定(Toggle2.html)
このHTMLを実際にブラウザで開く


ブラウザで開く


ボタンをクリック


リスト107の実行結果

Copyright© Digital Advantage Corp. All Rights Reserved.

ページトップに戻る