画像にマウスオーバーすると画像のキャプションを表示するサンプルの作成方法を説明します。右の画像をクリックしてサンプルを開き、画像にマウスオーバーしてキャプションがアニメで下から表示されるのを確認してください。このようなサンプルはニーズが多いため、プラグインなどもあるようですが以外と簡単に作成する事ができます。概要cssで隠したキャプションをアニメで表示キャプションはcssの設定で最初は隠しておき、マウスオーバーされた時にjQueryのanimateメソッドで表示するようにします。animateメソッドは使い方「汎用的なアニメ(1)」で説明しました。解説htmlとcssの確認まずはhtmlを確認しましょう。サンプル(caption/00.html)のソースを開いてbody内の構成を確認して下さい。以下の様にdiv要素内に画像とキャプション用の要素(p要素)が配置してあります。div要素は3つありますがすべて同じ構造なので以下には1つだけ記載しています。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)「移動する場合の注意点」を復習してください。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設定が以下の様に変更されているのを確認してください。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を確認します。childrenメソッドを利用して、div要素内のp要素を選択します。animateメソッドによってtop属性を-20pxにします。同じように5行目ではtop属性を0pxに戻しています。トラバースを忘れてしまった方は使い方「thisから辿る」を復習しておいて下さい。stopメソッドが設定されていますが、これについては使い方「アニメの停止」で説明している通りです。hoverメソッドを利用して、マウスオーバーでoverFunc、マウスアウトでoutFuncを実行するようにします。{$("div").hover(overFunc,outFunc);});これだけでdiv要素にマウスオーバーするとキャプションを表示するコンテンツが作成できます。速度や移動する位置の調整は使い方「汎用的なアニメ(2)」を参考に色々試してみて下さい。キャプションの要素を半透明にするこの様なサンプルではキャプションを半透明にすることが多いので、その処理も追加しておきます。半透明の設定はcssでも可能なのですがブラウザによって設定が異なるためjQueryで設定した方が簡単です。サンプル(switch/02.html)を開いてjQueryが以下のように変更されているのを確認して下さい(赤字部分が変更点)。2行目はtop属性の値を-100に変更しています、これは半透明なことを確認しやすいようにキャプションを上の方まで移動させたかったからです。{$("div>p").fadeTo(0,0.7);$("div").hover(overFunc,outFunc);});ポイントは8行目です。fadeToメソッドを利用して透明度を0.7にしています。第1引数に設定する値は演出期間なのですが、ここに0を設定したので直ちに透明度を0.7にします。実際にマウスオーバーしてキャプションが半透明なのを確認して下さい。キャプションをフェードインキャプションをフェードインで表示するサンプルも作成しました。サンプル(caption/03.html)を開いてbody内の構成に変更がないのを確認してください。キャプションのcssの設定は以下の様に変更しています。変更点は7行目でtop属性の値を-100pxにしています。これによって画像にピッタリ重なるようにキャプションが表示されます。8行目でdisplay属性をnoneに設定しているため、最初はキャプションが表示されません。p{margin:0px;width:100px;height:100px;background-color:#000000;position:relative;top:-100px;display:none;text-align:center;color:#ffffff;}jQueryではoverFuncとoutFuncの内容が変更されています。fadeToメソッドは前項で紹介しましたが、今回は第1引数に300を設定しました。これによって300ミリ秒(0.3秒)で透明度0.7にアニメします。マウスオーバーするとキャプションが透明度0.7で表示されます。fadeOutメソッドは指定した要素をフェードアウトさせるメソッドです。結果として、div要素にマウスオーバーするとキャプションがフェードインで表示され、マウスアウトでフェードアウトします。キャプションの表示はこれで完了です、以外と簡単に実現できたのではないでしょうか。次回はページ内リンクをアニメで実現するスムーススクロールの説明をします。