もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第6回 フェードの活用と簡易ロールオーバー

この記事を読むのに必要な時間:およそ 4 分

フェードとFirebug

console.log()の話はここまでとして,次はFirebugのHTML上での変化をみたいと思います。

要素のCSSなどをjQueryなどを使って変化(表示非表示やCSSなど)させたとき,その変化の様子をFirebugのHTMLタブの項目にて確認することができます。ここで一つ,またサンプルを用意しましたので,FirebugのHTMLタブ部分を表示した状態で,サンプルを実行してみてください。

フェードのサンプルコード

$(function(){
    $('dt','#sample3').toggle(function(){
        $(this).next().fadeTo("slow", 0.3);
    },function(){
        $(this).next().fadeTo("slow", 1.0);
    });
});

フェードのサンプルHTML

<dl id="sample3">
    <dt>ここをクリック</dt>
    <dd>ここの透明度が変化します</dd>
</dl>

DT要素をクリックすると,DD要素の透明度がゆっくり目に変化するというサンプルです。Firebugの変化の様子は下図のようになります。

サンプル実行前のHTML

サンプル実行前のHTML

サンプル実行中(スタイル変化中)のHTML

サンプル実行中(スタイル変化中)のHTML

サンプル実行後のHTML

サンプル実行後のHTML

サンプルの実行前から実行後で,HTML上でのstyleが変化しているのがわかると思います。

コンソールだけでなく,HTML上でどのような変化が起こっているのかというのを確認するのも,jQueryを使ったコードの確認などでは重要になってきます。今回はfadeToで透明度を変化させてのサンプルなので,styleの値が変化する状態を確認できます。

HTML上で変化がある箇所は,変化中背景が黄色になります。変化している箇所がわかりやすくなっていますので,変化している箇所が間違っていないのか,変化の値がどのようになっているのかなどのチェックにFirebug上のHTMLをチェックするようにしてください。

FireQueryが入っている場合,jQueryのイベントなどが付いている箇所には「events={ click=Object }」と表示がされるようにもなっています。イベントが付いているかどうかの確認でも利用してみてください。

fadeTo(変化の速さ,透明度)

今回のサンプルは,fadeToメソッドを使い,透明度を変化させています。変化の早さは,'fast'や'slow'のほか,数値(1000ミリセカンド=1秒)で指定します。透明度はCSSで言うopacityの変化で,1.0が完全に見える状態で,0に値が近づくほど透明になる指定ができます。0の指定で完全に見えなくなりますが,hide()とは違い,要素の範囲はそこに残ったままになっています。⁠≠display:none;)

toggle(fn1,fn2,[fn3,fn4...])

前回までに利用したtoggleの動作(表示・非表示を切り替える)とは違い,クリックするたびに指定したfnが順に変わるという指定です。今回のサンプルでは,クリックするたびにDD要素が,透ける→元に戻る→透ける…を繰り返すようになります。

クリックする度に呼び出す機能を変えて,それを繰り返させるような場合は,このtoggle()を利用しましょう。

透明度を利用した実践サンプル

それでは今回の最後に,透明度の変化を利用した実践サンプルを一つ紹介いたします。

実践サンプルコード

$(function(){
    $('#sample4').hover(function(){
        $(this).fadeTo(200,0.5);
    },function(){
        $(this).fadeTo(300,1.0);
    });
});

実践サンプルHTML

<div id="sample4"><p>ここにマウスを乗せてください</p></div>

透明度を利用した簡易ロールオーバーです。これを利用することで,たとえ画像が1枚であっても,画像でなくてブロック要素やテキストなどでも,あらゆるところでロールオーバーを簡易的に実現することができます。画像の用意が間に合わないようなときや,簡易的にロールオーバーを実装したい場合などで実用的です。

CSSだけで実装するのと違い,変化までの様子も表現されるので,ふわっとした感じのロールオーバーになります。

実践サンプルでのマウスを乗せたとき

実践サンプルでのマウスを乗せたとき

変化の速度を遅くしたり,もっと早くしたり,透明度を替えるなどをすることで,ロールオーバーを実行した時の印象も変化させることができるので,好みに合ったロールオーバーを簡単に実装できます。

今回はDIV要素に対して指定しましたが,IMG要素でも,P要素でも,好きな箇所を指定して利用してください。

今回の第6回も比較的簡単目なサンプルをご紹介しました。今後さらにコードが複雑になったりもしますので,Firebugを活用するようにしてください。うまく動作しなかったときなどはconsole.log()を利用したり,Firebug上でHTMLをみて,どのような変化が起こっているのかなどを,確認するようにしてください。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/