読んで覚える,触って体験!JavaScript&CSS3~gihyo.jp×jsdo.it presents

第3回 jQueryの基本(回答編)

この記事を読むのに必要な時間:およそ 2.5 分

not(:animated)の判定を入れた作品

この作品はslideDownが使われていますが,少し工夫されています。slideDownでアニメーションするとき,まだアニメーションしている最中にマウスアウトして再度マウスオーバーという動作を繰り返すと何度もアニメーションが動作してしまいます。それを防ぐために,マウスオーバーした際にアニメーション中かどうかという判定を入れています。

$(this).find('ul:not(:animated)').slideDown();

この:animatedというはjQueryの独自セレクタで,アニメーションしている要素かどうかを判別できます。さらにnot(:animated)ですのでアニメーションしていない場合にslideDownするということになります。

CSS3でアニメーション

この作品は面白い方法でアニメーションしています。JavaScriptのコードはとても普通でcssのdisplayを変化させているだけです。

$('.menuItem').hover(
  function() {
    $('.submenu',this).css('display','block');
  },
  function() {
    $('.submenu',this).css('display','none');
  }
);

これはJavaScriptは最小限のシンプルなコードにして,CSS3のアニメーションを使ってアニメーションさせています。今回のお題の趣旨とは若干外れるので具体的なCSSのコードの解説はしませんが,今後この連載でもCSS3については扱っていく予定なので,JavaScriptの組み合わせでこのような面白い動きが実現できるというのは覚えておくといいかもしれません。

マウスアウトした後しばらくしてから非表示にする作品

この作品は,今回forkしてもらった作品の中で一番多い量のJavaScriptが書かれていた作品で,面白い点としてマウスアウトした後しばらくサブメニューが表示されたままになっていて,ある程度時間が経過すると非表示になるという動きになっています。別のメニューにマウスオーバーしたときはサブメニューは残らずにちゃんと消えるという細かい動作もつくられています。JavaScriptを始めたばかりの人には高度なスクリプトですが,今回のお題がもの足りないと思った方はこちらのコードを読んでみると面白いかもしれません。

おわりに

今回でjQueryの基本的な使い方を解説して簡単なUIの作成を実際にやってもらいました。jQueryを使えばとても簡単で直感的にJavaScriptを書くことができることがおわかりいただけたと思います。

著者プロフィール

外村和仁(ほかむらかずひと)

HTMLコーダー,JavaScriptプログラマ,PHP,Perlのプログラマといった職務を経験後,2010年に株式会社ピクセルグリッドに入社。大規模サイトの運用,開発の経験を活かしてバックエンドからフロントエンドまで幅広く担当。好きな言語はPythonとJavaScript。JavaScriptの勉強会,jstudyを主催している。

Twitter: @hokaccha