jQuery APIでWebサイトを演出しよう

ホバーアニメーション

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスを重ねる(ホバーする)と、ゆっくり半透明にするスクリプトを作ってみましょう。
講師:
05:53

字幕

このレッスンではマウスホバーとフェードインの組み合わせでマウスホバーのエフェクトを作ってみましょう。それではまず final のフォルダーの中の index.html をブラウザーで開きます。ブラウザーで開いたら、ナビゲーションにマウスカーソルを当ててみましょう。色が単純に切り替わるだけではなくて少しフワッというエフェクトがかかってそしてちょっと薄くなります。このように少し滑らかな感じのエフェクトの作り方をやっていきましょう。それではファインダー、フォルダーに戻ってbegin のフォルダーをフォルダーごとSublime Text にドラッグアンドドロップします。そして index.html をまずダブルクリックで開いておきましょう。そして今回記述する JavaScriptは サイト内で共通で使用していきたいのでcommon.js に記述をして行きたいと思います。js フォルダーを開いて common.js をダブルクリックで開きます。そしてこの ready の関数の中に記述をしていきましょう。こちらの終了の括弧の手前に改行を打ってここに書き始めていきましょう。$( そしてセレクターを書きましょう。 今回は nav というセレクターの子供の a という風に子孫セレクターでセレクターを特定してそしてメソッドホバーを使います。ホバーはマウスイベントですね。マウスが重なった時とマウスが重なっているものから外れた時の2種類のエフェクトを1つのメソッドで記述することが可能です。hover(function)と入力してそして波括弧を打ってEnter を押します。ここにホバーしたときの内容を書けるのですがそうしたら $(this) と入れます。この nav a と同じものなのでthis という風に書くことができます。そして .fadeTo と書いて(200, 0.6) と入力をしておきます。これの意味は fadeTo というのはここまでフェードして下さいというメソッドでこの 200 は時間です。ミリセカンドなので 0.2 秒をかけて60% の透明度にしてくださいという意味になります。そしてこちらの波括弧の終わりでカンマを打ちましょう。そして Enter を打って今度はここに新しく function を作ります。(){ そして Enter です。このコンマの後の function はマウスが外れた後の実行を行うことができます。 そして同様に $(this)これが fadeTo でマウスを外したら元に戻って欲しいわけなので0.2 秒かけて透明度が 1.0 に戻ってきてほしいという風に記述をしました。では一度上書き保存をしてhtml にフォーカスをして右クリックから Open in Browser をクリックしましょう。開いたらナビゲーションをこのようにマウスで触ってみてみると、このようにフワッとエフェクトがかかりますが例えば何回も往復をしてみると、このように何度もフェードイン、フェードアウトが繰り返されてしまいます。これだと少し気持ち悪いですのでこのようにならないように処理をして行きましょう。Sublime Text に戻りcommon.js を開いてfadeTo の手前にもう1個メソッドを加えましょう。.stop()これは停止している物でないと、ということでそういう条件を加えることができるメソッドです。下にも同様に .stop() という風にチェーンですね。メソッドチェーンでメソッドをつなげてあげました。では上書き保存をしてブラウザーで開きブラウザーを更新してナビゲーションを何回も触りますが今度は何回もフェードイン、フェードアウトが繰り返されなくなりました。 ではもう一度Sublime Text に戻りまして後はパラメータをお好みで変えるだけでこのようにナビゲーションやもしくはこのセレクターを画像とかに変えても画像透明度を変えてフェードイン、フェードアウトさせることができるのでこちらをスニペットとして使われると非常に便利なのではないかと思います。このレッスンではマウスホバーとfadeTo のイベントを組み合わせてマウスホバーのエフェクトを作ってみました。

jQuery APIでWebサイトを演出しよう

jQueryはJavaScriptを効率良く記述することができる、世界中で広く使われているライブラリです。APIとは外部のウェブサービスを自分のサイト内で利用できる仕組みのことです。このコースではjQueryやAPIの基本を学習したのち、jQueryのプラグインやGoogle APIなどの実践的な使い方について学びます。

2時間43分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。