jQuery：hover()での画像切り替えetc

今回は、hover()メソッドを使った画像の切り替えと、その他の便利なメソッドにつきまして、サンプルコードを交え詳しく記載していきたいと思います。

「hover()メソッドってどう使うの？」や「hover()メソッドに似たようなメソッドって？」などの疑問に対して、jQueryの基本的な記述方法を、初心者の方でも比較的分かりやすいように、サンプルコードを用いて詳しく記載してみようと思います。

という事で、それでは今回はッ、

・画像切り替えを同時に記述するならhover()メソッド
・フォームにフォーカスしたときfocus()メソッド
・フォーカスが外れたときblur()メソッド
・少し変わったイベント、アニメーションが終ったら

上記について記載していこうと思います…。

画像切り替えを同時に記述するならhover()メソッド

前回、mouseenter()メソッドと、mouseleave()メソッドをメソッドチェーンでつないで記述しました。しかしマウスをのせたとき、外れたときというイベントはセットで使うことが多くなります。

jQueryのメソッドにも、コレをセットにしたhover()メソッドというものがあります。hover()メソッドは、mouseenter()とmouseleave()を同時に使用したい時には便利なメソッドになります。

サンプルHTML<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#trigger”).hover(function(){
$(“#photo img”).attr({
“src”: “images/RoadBike2.jpg”,
“alt”: “天狗の湯”
});
}, function(){
$(“#photo img”).attr({
“src”: “images/RoadBike1.jpg”,
“alt”: “敷島温泉”
});
}).click(function(){
return false;
});
});
</script>
</head>
<body>
・・省略・・
<p id=”photo”>
<img src=”images/RoadBike1.jpg” alt=”敷島温泉”
width=”300″ height=”225″>
</p>
<p>
<a id=”trigger” href=”#”>画像を天狗の湯に切り替える！</a>
</p>
・・省略・・
</body>
</html>

敷島温泉

画像を天狗の湯に切り替える！

hover()メソッドの記述方法は、今までのメソッドチェーンを使った書き方とは少し異なります。

hover(マウスがのったときのイベントハンドラ,マウスが外れたときのイベントハンドラ)

hover()メソッドの中に、マウスがのったときのイベントハンドラとマウスが外れたときのイベントハンドラをふたつ記述して（,）カンマで区切って記述します。

サンプルHTML$(“#trigger”).hover(function(){
$(“#photo img”).attr({
“src”: “images/RoadBike2.jpg”,
“alt”: “天狗の湯”
});
}, function(){
$(“#photo img”).attr({
“src”: “images/RoadBike1.jpg”,
“alt”: “敷島温泉”
});
});

緑の部分 ———マウスがのったときのイベントハンドラ
青の部分 ———マウスが外れたときのイベントハンドラ

jQueryのコードに慣れないうちは、括弧やブレースが多くてどこからどこまでが、ひと区切りなのか混乱してしまいがちかと思います。しかし上記のように整理してみると、比較的分かりやすいことと思います。緑色の部分がマウスがのったときのイベントハンドラで、青の部分がマウスが外れたときのイベントハンドラです。

フォームにフォーカスしたときfocus()メソッド

クリック、マウスホバーとイベントを記載してきましたが、次にinput要素などにフォーカスしたときのイベント系メソッドfocus()を使ったサンプルを記載してみます。フォーカスは該当の要素をクリックしたときの他、Tabキーなどで該当要素が入力可能状態になった場合にも発生します。

サンプルHTML2<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#s”).focus(function(){
$(“#s”).val(“”);
});
});
</script>
</head>
<body>
・・省略・・
<p>
<input type=”text” size=”30″ name=”s” id=”s” value=”入力してください”>
<input type=”submit” class=”button” value=”Seach”>
・・省略・・
</body>
</html>

HTMLソースのvalue属性に記述されていた、「入力してください」の文字が消えます。これはとても簡単なサンプルですね。

フォーカスが外れたときblur()メソッド

blur()メソッドは、focus()メソッドの逆、フォーカスが外れたときを感知するメソッドです。サンプル3では、フォーカス時に消してしまった「入力してください」の文字を、フォーカスが外れたときに再び表示しています。

サンプルHTML3<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#s”).focus(function(){
$(“#s”).val(“”);
}).blur(fonction(){
$(“#s”).val(“入力してください”);
});
});
</script>
</head>
<body>
・・省略・・
<p>
<input type=”text” size=”30″ name=”s” id=”s” value=”入力してください”>
<input type=”submit” class=”button” value=”Seach”>
・・省略・・
</body>
</html>

HTMLソースの部分は、先ほどと同じです。blur()メソッドで、フォーカスが外れたときに、val()メソッドでvalue属性に「入力してください」と表示しています。

少し変わったイベント、アニメーションが終ったら

それでは、ユーザーによる操作以外のイベントを紹介します。以前アニメーション系のメソッドを記載いたしましたが、アニメーション系メソッドを使った場合、そのアニメーションが終わった時点をイベントにすることができます。それでは早速サンプルを記載してみます。

サンプルHTML4<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<style>#photo {display:none;} </style>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#photo”).feedIn(2000,(function(){
$(“#photo”).feadeOut(2000);
});
});
</script>
</head>
<body>
・・省略・・
<p id=”photo”>
<img src=”images/HotSpring.jpg” alt=”敷島温泉” width=”300″ height=”225″>
<p>
・・省略・・
</body>
</html>

敷島温泉

フェードインで画像が表示されたあと（アニメーションの終了をきっかけに）に、fadeOut()メソッドでフェードアウトさせています。もし、↑になにも表示されていない場合は、ここで一度ブラウザの更新をしてみてください。

サンプルHTML4$(“#photo”).feedIn(2000,(function(){
$(“#photo”).feadeOut(2000);
});

アニメーション系のメソッドでは、アニメーションのスピードの後にイベントハンドラ（黄色い部分）を記述することで、アニメーションの終了時に別の処理をすることができます。

サンプルでは、fadeIn()メソッドでのアニメーション終了時に、イベントハンドラ内のfadeOut()メソッドが実行されています。

もちろん他のアニメーション系メソッド（hide、show、slideUpなど）でも、同じようにイベントハンドラを記述して、「アニメーションが終ったら、イベントハンドラを実行」させることができます。

また、ひとつのメソッドが終了してから、次のメソッドを実行する仕組みを「コールバック」と呼びます。

という事で今回は、jQuery：hover()での画像切り替えetcにつきまして、サンプルコードを交え記載してみました。

実際の制作現場では、最後に少し記載いたしましたコールバックを頻繁に使うことがございます。メソッドチェーンやコールバック、慣れてしまえばなんてことない事ですが、初めのうちは括弧やブレースが多くなることから、初心者であれば、なおさら分けが分からなくなってしまうことと思います。

ポイントは、分割してから記載して繋げる！これであれば、比較的迷うことなく記述できることと思います。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。