jQuery入門講座サンプル-キャプションの表示

キャプションの表示

サンプル紹介

キャプションの表示

画像にマウスオーバーすると画像のキャプションを表示するサンプルの作成方法を説明します。右の画像をクリックしてサンプルを開き、画像にマウスオーバーしてキャプションがアニメで下から表示されるのを確認してください。このようなサンプルはニーズが多いため、プラグインなどもあるようですが以外と簡単に作成する事ができます。

概要

cssで隠したキャプションをアニメで表示

キャプションはcssの設定で最初は隠しておき、マウスオーバーされた時にjQueryのanimateメソッドで表示するようにします。animateメソッドは使い方「汎用的なアニメ(1)」で説明しました。

解説

htmlとcssの確認

まずはhtmlを確認しましょう。サンプル（caption/00.html）のソースを開いてbody内の構成を確認して下さい。以下の様にdiv要素内に画像とキャプション用の要素（p要素）が配置してあります。
div要素は3つありますがすべて同じ構造なので以下には1つだけ記載しています。

<div>
	<img src="images/A.gif" width="100" height="100">
	<p>sample A</p>
</div>

続いてcssを確認します。まずはdiv要素の設定を確認してください。ポイントは3行目のoverflowの設定をhiddenにしている点です。これでdiv要素外に溢れた要素は表示されません。

div要素の大きさは以下の様に幅100px、高さ100pxに設定してあり画像の大きさと同じになっています。そのためキャプション用のp要素はdiv要素からハミ出るため表示されません。このp要素をjQueryで移動させて表示させるわけです。

div{
	cursor:pointer;
	overflow:hidden;
	margin:10px;
	width:100px;
	height:100px;
	float:left;
}

次にキャプションのp要素のcss設定を確認します。この要素はanimateメソッドでcssのtopプロパティを操作して表示するようにするので、positionプロパティをstatic以外にする必要があります。このことを忘れてしまった方は使い方：汎用的なアニメ(1)「移動する場合の注意点」を復習してください。

div p{
	margin:0px;
	width:100px;
	height:100px;
	background-color:#000000;
	position:relative;
	top:0px;
	text-align:center;
	color:#ffffff;
}

6行目のtopプロパティの設定は必要ない（デフォルトで0px）のですが、次のサンプルとの比較のため設定しておきました。サンプルcaption/00.htmlではp要素が隠れて見えませんので、確認のため表示するようにしたサンプル（caption/00b.html）を用意しました。ソースを開いてキャプションのcss設定が以下の様に変更されているのを確認してください。

div p{
	margin:0px;
	width:100px;
	height:100px;
	background-color:#000000;
	position:relative;
	top:-20px;
	text-align:center;
	color:#ffffff;
}

上記のようにtop属性の値が-20pxに変更されています。そのためキャプションが20px上に配置され画像に重なって表示されるようになります。つまりマウスオーバーでtop属性の値を-20px、マウスアウトで0pxにアニメさせれば良いわけです。

jQueryの設定

ではjQueryを追加していきましょう。サンプル（caption/01.html）を開いてjQueryを確認してください。まずは以下のoverFuncとoutFuncを確認します。

function overFunc(){
	$(this).children("p").stop().animate({top:-20});
}
function outFunc(){
	$(this).children("p").stop().animate({top:0});					
}

2行目の処理は、this（イベントが発生したdiv要素）に対しトラバースのchildrenメソッドを利用して、div要素内のp要素を選択します。そしてanimateメソッドによってtop属性を-20pxにします。同じように5行目ではtop属性を0pxに戻しています。
トラバースを忘れてしまった方は使い方「thisから辿る」を復習しておいて下さい。

animateメソッドの前にstopメソッドが設定されていますが、これについては使い方「アニメの停止」で説明している通りです。

あとは以下の様にdiv要素に対し使い方「初歩的なサンプル」で利用したhoverメソッドを利用して、マウスオーバーでoverFunc、マウスアウトでoutFuncを実行するようにします。

$(function () {
	$("div").hover(overFunc,outFunc);
});

これだけでdiv要素にマウスオーバーするとキャプションを表示するコンテンツが作成できます。速度や移動する位置の調整は使い方「汎用的なアニメ(2)」を参考に色々試してみて下さい。

キャプションの要素を半透明にする

この様なサンプルではキャプションを半透明にすることが多いので、その処理も追加しておきます。半透明の設定はcssでも可能なのですがブラウザによって設定が異なるためjQueryで設定した方が簡単です。

サンプル（switch/02.html）を開いてjQueryが以下のように変更されているのを確認して下さい（赤字部分が変更点）。2行目はtop属性の値を-100に変更しています、これは半透明なことを確認しやすいようにキャプションを上の方まで移動させたかったからです。

function overFunc(){
	$(this).children("p").stop().animate({top:-100});
}
function outFunc(){
	$(this).children("p").stop().animate({top:0});					
}
$(function () {
	$("div>p").fadeTo(0,0.7);
	$("div").hover(overFunc,outFunc);
});

ポイントは8行目です。まずセレクタでは子要素を選択する「>」を利用して、div要素内にあるp要素（つまりキャプション）を選択し、fadeToメソッドを利用して透明度を0.7にしています。第1引数に設定する値は演出期間なのですが、ここに0を設定したので直ちに透明度を0.7にします。
実際にマウスオーバーしてキャプションが半透明なのを確認して下さい。

キャプションをフェードイン

キャプションをフェードインで表示するサンプルも作成しました。サンプル（caption/03.html）を開いてbody内の構成に変更がないのを確認してください。しかしキャプションのcssの設定は以下の様に変更しています。

変更点は7行目でtop属性の値を-100pxにしています。これによって画像にピッタリ重なるようにキャプションが表示されます。しかし8行目でdisplay属性をnoneに設定しているため、最初はキャプションが表示されません。

div p{
	margin:0px;
	width:100px;
	height:100px;
	background-color:#000000;
	position:relative;
	top:-100px;
	display:none;
	text-align:center;
	color:#ffffff;
}

jQueryではoverFuncとoutFuncの内容が変更されています。3行目で利用しているfadeToメソッドは前項で紹介しましたが、今回は第1引数に300を設定しました。これによって300ミリ秒（0.3秒）で透明度0.7にアニメします。つまりマウスオーバーするとキャプションが透明度0.7で表示されます。

function overFunc(){
	$(this).children("p").stop().fadeTo(300,0.7);
}
function outFunc(){
	$(this).children("p").stop().fadeOut();					
}

5行目で利用しているfadeOutメソッドは指定した要素をフェードアウトさせるメソッドです。結果として、div要素にマウスオーバーするとキャプションがフェードインで表示され、マウスアウトでフェードアウトします。

キャプションの表示はこれで完了です、以外と簡単に実現できたのではないでしょうか。次回はページ内リンクをアニメで実現するスムーススクロールの説明をします。

次のページ：スムーススクロール(1)