jQueryの命令を記述する（アニメーション）

アニメーション命令は、表示と非表示（display:noneとblock）をどのように切り替えるかの指定と、数値（％、px等）で表せるCSSプロパティをリアルタイムに切り替えることの2つが主な処理となっています。

CSSのdisplay:noneとvisibilty:hidden命令の違いをここで覚えておくと良いかもしれません。

display:noneはその空間すらが消えてしまいます（ただし、存在はしています）から後の要素が前に繰り上がってスライドされるイメージですが、visibility:hiddenは空間は残りますので、ここでの例を実行した時のようにONとOFFボタンの切り替えでページ内容が上下にスライドしたりすることはありません。

そのため、ロールオーバーのように前面と背面の画像を切り替えるような空間を残す必要がある時はvisibility:hiddenでも構いません。もちろん背景が残っていれば画面がスライドすることは無いのでロールオーバーではdisplay:noneも使えます。

ただし、CSSでは後面初期配置されているからいいですが、javascriptの場合は画像を切り替えるたびに画像をその都度ロードしないといけないから、画像のロードが遅くて表示までに時間がかかる場合がある。そのために、あらかじめ対象画像を読み込んでおく「プリロード」という処理を入れておく必要がある。

プリロードのやり方は、$("$lt;img$gt;").attr("src","abc.gif");のような形で、img要素を生成したあと、そのsrc属性をabc.gifにする。

要素の生成方法は$()にて

show(スピード,コールバック関数)

display:noneからblockに切り替える命令。styleのdisplayプロパティの初期値をきちんと設定しておきましょう。（imgでもいいし、imgの親のpやdivでもいいです）

show()の（）内は数字や命令ならそのまま、fast,normal,slowなら“”でくくります。

コールバック関数というのは、アニメーションが終了したらされる命令で、スピード、カンマのあとにfunction(){}の形で指定します。

下の例のボタン表示（ONとOFF）の切り替えもコールバック関数で指定していないので、アニメーションが終わる前にOFFという文字になっていますね。

訳）ボタンを押したら2秒かけて表示させる。（1000＝1秒）

//jsファイル内
$(function(){
    $("p#z1").click(function(){
    $("div#z2").show(2000);
    });
});

逆に非表示させるのは、hide()、表示・非表示を交互にさせるのは、、toggle()。

これらを使ったサンプルは以下。toggleイベントに対してコールバック関数を指定してONとOFFの文字を切り替えています。

ON

<!--HTML-->
<p id="z1">ON</p>
<div id="z2"><img src="../gif/105.gif" alt="" /></div>

/*CSS*/
p#z1 {
	text-align:center;
	font-weight:bold;
	color:#fff;
	width:60px;height:25px;
	background:url(../gif/104.gif) center center no-repeat;
	cursor:pointer;
	}
div#z2 {
	display:none;
	}

//js
$(function(){
    $("p#z1").click(function(){
    $("div#z2").toggle(2000,function(){
        if($("p#z1").text()=="ON"){
            $("p#z1").text("OFF");
        }else{
            $("p#z1").text("ON");
        };
        });    
    });
});

また、ここで初めてif文がでてきました。

もし、○ならば△、そうでなければ、□という意味です。○はCSSプロパティが入ることが、△と□には$から始まる処理命令が入ります。

//js
if(○){
	△
}else{
	□
	};

slidedown(スピード,コールバック関数)

display:noneからblockに切り替える命令。show()がサイズ（高さと幅）に対して、高さのみを動かして表示/非表示を切り替える。

slideDown()は表示の命令。非表示はslideUp()、交互はslidToggle()。upとdownのUとDは大文字でなければエラーになります。

訳）dt要素をクリックする。もしdd要素のdisplayがblock（表示）であれば、dd要素を非表示にし、それ以外（非表示）なら、表示させる。

<!--HTML-->
<dl id="z3">
<dt>ここをクリックすると下の段が消える</dt>
<dd>あいうえお<br />かきくけこ<br />さしすせそ<br />たちつてと</dd>
</dl>

//jsファイル内
$(function(){
    $("dl#z3 dt").click(function(){
    if($("dl#z3 dd").css("display")=="block"){
        $("dl#z3 dd:not(:animated)").slideUp("slow");
    }else{
        $("dl#z3 dd").slideDown("slow");
    };
    });
});

:not(:animated)は否定擬似クラスのようなものとして、その中でもアニメーションが起こっているときにボタンを連打するとアニメがその連打の回数分終えるまで止まらないのを防ぐ決まり文句です。

アニメーション系の命令には、指定を忘れないようにしましょう。

fadeIn(スピード,コールバック関数)

display:noneからblockに切り替える命令。その名の通り、フェードインとアウトで表示・非表示を切り替える。

fadeIn()は徐々に表示、fadeOut()は徐々に非表示、fadeTo()はdisplayはblockのまま透明度だけを変える（スピードの後にカンマで0～1の透明度を指定）。

訳）ボタンを押すと、アニメーションしていないdiv要素内の画像が、ゆっくり現れる。もう一度押すとゆっくり消える。（imgにdisplayを指定してます）

//jsファイル内
$(function(){
    $("p#z4").click(function(){
    $("div#z5 img:not(:animated)").fadeIn("slow");
    });
    $("p#z4").click(function(){
    $("div#z5 img:not(:animated)").fadeOut("slow");
    });
});

ON/OFF

animate(プロパティ名,スピード,動き,コールバック関数)

数値系のCSSプロパティ（width,opacity,fontsize他）であれば、表示・非表示やその挙動を自由にコントロールできる。（例：animete({fontSize:"20px"},"slow","swing");でフォントをゆっくり一定速度で20pxにする）

スピード要素はslide等と同じ、動き要素としてlinear（常に一定の速度）とswing（最初ゆっくり、後半早く）を指定できる。

cssプロパティでmargin-leftのようなハイフンを使うものはハイフンを省略すること。

cssだとleftのエルは小文字が普通だが、ここでは大文字にしないとエラーになる。

数値の方もCSSプロパティ値を指定する場合は、そのままでなく””で囲む。

amimateの中にかぎらず、.css命令の時でも、cssプロパティごと指定したい場合は、{}で囲むのにも注意。（.css(“color”,”blue”)のような場合に{}は必要ない。

訳）右矢印ボタンを押すと、p要素の－400pxのネガティブマージンをslowにswingで移動させる。

また、ここで初めてif文がでてきました。

//jsファイル内
$(function(){
    $("p#z6").click(function(){
    $("div#z8 p:not(:animated)").animate({marginLeft:"0px"},"slow","swing");
    });
    $("p#z7").click(function(){
    $("div#z8 p:not(:animated)").animate({marginLeft:"-400px"},"slow","swing");
    });
});

/*CSS*/
p#z6,p#z7 {
	font-weight:bold;
	color:#fff;
	float:left;
	font-size:12px;
	width:60px;line-height:25px;
	background:url(../gif/104.gif) center center no-repeat;
	cursor:pointer;
	}
div#z8 {
	width:400px;
	height:auto;
	overflow:hidden;
	}
div#z8 p {
	width:800px;
	height:auto;
	}

ポイントはCSSの記述で、切り替え画像の幅は400px。幅400pxのdivという枠の中からはみ出す形で、画像2枚が横に並んだ幅800pxのp要素が存在していて、枠からはみ出た部分をoverflow:hiddenで見えなくしている。

margin-leftの初期値は0だから、左にスライドさせるためにはネガティブマージンでp要素の左側をさらに左に400px移動させなければならない。

コメントor補足情報orご指摘あればをお願いします。

• << 前のページ
• 次のページ >>