今回は、マウスカーソルを画像に乗せると、画像に新たにレイヤーが追加され、キャプションが現れる仕組みを作ってみましょう。
最初に動きをよく確認して、何が起こっているのかしっかり頭に入れましょう。
HTML, CSS と jQuery の関係について、基礎から学びたい方は以下を参考にしてください。
HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】
マウスホバーでキャプションを表示させる
完成形はこんな感じです
See the Pen
caption by taichi (@taichi_na)
on CodePen.
マウスカーソルを画像に乗せてみてください。
画像に一枚レイヤーが追加されてそこにキャプションが出てきます。
少し下からキャプションの文字があらわれることに注意してください。
これは CSS でも表現が可能なのですが、とりあえず jQuery の練習と思って取り組んでみましょう！
基本となるHTMLを作ります
See the Pen
caption by taichi (@taichi_na)
on CodePen.
<main> の中にタイトルの <h1> と <ul> が入っているだけのシンプルな構成です。
これは相変わらずですね。説明するにはシンプルが一番！
<li> の中には画像が入っていて、画像内の alt にはこのあと表示させるキャプションの文が入れてあります。
キャプション画面となる <div> はこのあと jQuery でHTML内に書き込むように指示してあげます。
CSSで全体を装飾をします
See the Pen
caption by taichi (@taichi_na)
on CodePen.
全体を中央に寄せています。いつものように装飾は最低限です。
気を付けてほしいのは <li> に対して以下のようにかいてあるところです。
position: relative;
これは以下の <div> に
position:absolute;
と書いてあり、その基準として先ほどの <li> を指定してるからです。
場所は左上にしたいので、
top:0;
left:0;
としました。
そして、キャプション文字の <p> の部分ですが、アニメーションで下から飛び出すようにしたいので、
main p {
position:relative;
top: 10px;
}
としました。 relative で top から 10px ずらしたのです。relative を指定すると、もともとあった場所から指定した数値だけズラすことができるのです。
jQuery で表示に動きを付ける
See the Pen
caption by taichi (@taichi_na)
on CodePen.
ではここからが本番ですね。少し長いので一つずつ解説していきます。
スクリプト内に番号をふってありますので、それを参考に見ていってください。
1. $(“li”).append(“<div></div>”);
append() は指定した要素に、引数内の書かれた要素を挿入します。
<li><img><div></div></li> となったわけですね。
※CSSで display: none; を指定しているので、この段階では見た目の変化はありません。
2. $(“div”).each(function(){
$(this).html(“<p>” + $(this).parent().children(“img”).attr(“alt”) + “</p>”);
});
まずは each メソッドで繰り返し生成されるようにします。すべての <div> 内（今回は２つだけですが）に html() の引数に指定された値を追加します。
青地で示した <p></p> を追加し、<li><img><div><p>ここにキャプション</p></div></li> という形になるということです。
さてキャプションである <p> の内側ですが、「親要素の子要素である<img>の”alt”の値を取得」という意味になります。HTMLの <img> 内には alt にあらかじめキャプションが書かれていましたね。それを取得しているということです。
3. $(“li”).hover(function(){
この一文は、<li> にマウスカーソルを乗せたときに、引数内の関数を実行する、という命令です。
4. $(this).children(“div”).stop().fadeIn(300);
<li> の子要素 <div> をフェードインさせます。
5. $(this).children(“div”).children(“p”).stop().animate({“top” : 0}, 300);
}, function(){
top の値を 0 までアニメーションします。top の値はあらかじめ CSS で 10px としておいたので、少し上に上がって表示されるということですね。
そして、hover() に二つ目の function を指定して、マウスアウトしたときの処理を書きます。（赤字の部分）
6. $(this).children(“div”).stop().fadeOut(300);
これは表示していた <div> をフェードアウトする命令ですね。hover() の二つ目の function として書かれていて、<li> からマウスアウトしたときに <div> がフェードアウトします。
7. $(this).children(“div”).children(“p”).stop().animate({“top”:”10px”}, 300);
li の子要素 div の p の top の値を現状から 10px まで 300ミリ秒で移動！ ということです。
parent() children() を使い慣れましょう
今回は parent() children() が複数回登場しました。
このように動作の対象となる要素を階層をたどって指定していくのが、プログラミングっぽくてなんだか楽しくなります。
今後、さらに難しい言語に挑戦する練習として、やはり jQuery はもってこいだと思います。
私も少しずつ勉強して慣れていっている最中です。一緒に頑張っていきましょう！！
