POPSブログ

jQuery アニメーション show,fadeIn,slideToggle 等について

359

  Category:  jquery2015/06/07 pops 

jQuery アニメーションの中でも「ビルドイン」スタイルの show() fadeIn() slideToggle() toggle() 等についての使用方法と注意点などに関することです。ほぼ知識が無くとも簡単に実装できる利点があります。

 

jQuery アニメーションの種類

● show() fadeIn() slideToggle() toggle() 等の「ビルドイン」スタイルで手軽に利用できるものと、
● animate()のカスタムアニメーションの2種類が有ります。「ビルドイン」のアニメーションでは対応できない場合に利用します。


1. アニメーションの実態は小刻みにCSSを変更(変化)させているだけです。
2. 「ビルドイン」スタイルは簡単に実装できますが、細やかな条件を付けることが出来ません。
(それなりの限定された定形の動きになりますが利用頻度は高い)
3. カスタムアニメーションは面倒のようですが、さほどでは有りません。左右のslide(参考)
4. アニメーションの前にCSSが最も重要に成ります。
(よって、CSSの基礎だけは身に着けたいものです)


アニメーションとは言っても、ホンモノの「アニメ」には程遠く、位置を変えたり、せいぜいフェードさせる位のものですが、それでもページ、コンテンツ、画像などにに変化を付ける効果はあります。


[ 目次 ]

 

1. アニメーションのコツ CSSの知識が大事
2. ビルドインスタイルの show() fadeIn() slideToggle() toggle() 書式、速度、イージング等
3. show()、hide()、と toggle()
4. fadeIn()、fadeOut()、と fadeToggle()
5. fadeTo()
6. slideDown()、slideUp()、と slideToggle()
7. slideとfadeの組み合わせ / 左右のslide
8. アニメーションを軽くする 努力する方法
9. サンプルのHTML、JS、CSS
10. ラッスンゴレライアニメーション サンプル他 ラッスンゴレライアニメーションて何ですねん
11. jQuery 3.0 / jQuery Compat 3.0 alpha リリースの重要変更 重要 2015/08/05追加

 

 

zu

 

DEMO jQueryラッスンゴレライアニメーション サンプル他

● デモページは [ jqury-1.9 ] で動作しています。


DEMO-018


Chrome Opera Firefox IE10-11で動作確認済み。 Mac系は未確認です。

 

簡単な説明


アニメーションのコツ

アニメーションのコツはjQueryアニメーションを覚えることでは有りません。


1. jQueryの前に、CSSの基礎を身に付ける。
2. 1世代古いマシン(2-3年前)環境で作る。
3. CSS2のフィルターなどは使用しないで、CSS3で設定する。
4. 最新のブラウザ対応にして、IE10以前には対応しないことを徹底する。
5. 旨く行かない場合はごまかす。(あきらめないでゴマカシ方法を考える)


jQueryアニメーションで覚えることは少ない、つまり簡単です。それよりHTMLの構造とCSSが重要です。構造次第では非効率なアニメにもなりますし、数をこなすしか方法は無いと思います。私のモットーはイイカゲンとゴマカシです。


ビルドインスタイルの show() fadeIn() slideToggle() toggle()

簡単に実装できますが、消えたときには display:noneに成るのが特徴です。アコーディオンを作る場合は大変重宝です。

jQueryでは「ビルドイン」のものが結構そろっていますので、jQueryアニメーションは一般的にこれを指します。


1. jQuery側で「処理し易いように」処理されますので、細やかな動作変更は出来ません。
2. 余り意識せず、大まかに使用します。
3. 対処できない場合はカスタムアニメーションを利用します。
4. 旧式のIE8、IE9に対応することは考慮しない事が大事。
(再起不能なほど酷い目にあう、ヤメトキナハレ)


書式

ビルドインスタイルの show() fadeIn() slideToggle() toggle()等の書式は以下の通りです。
その他にも書式はありますが、使用することは無いと思いますので省略します。詳細は「リファレンス」などを参照ください。


引数を省略された場合は速度には 400 が設定されますが、一部メソッド(delay)と連携しない場合がありますので省略しない様にします。...と言いながら show() hide() は省略することが多い。



jQueryオブジェクト
$("対象アイテムID名など");

jQueryオブジェクト.show(速度 [,イージング] [,function]);

省略された場合は速度 normal、イージング swing、に成ります
jQueryオブジェクト.show();


なるべく速度は省略しないほうが良い
jQueryオブジェクト.show(200);

----------------------------------------------

全てほぼ同じ書式です、速度のみの場合

jQueryオブジェクト.show(速度);
jQueryオブジェクト.fadeIn(速度);
jQueryオブジェクト.slideDown(速度);

function設定の場合1、こちらの無名関数を使用するのが多い
jQueryオブジェクト.fadeIn(速度,function(){
	//処理を書く
});

--------------------

function設定の場合2、処理形態は好みです
jQueryオブジェクト.fadeIn(速度,関数名);

function 関数名(){
	//処理を書く
}

朱美チャンサンプル

● 下のBOX「click」で朱美チャン画像を、FADE表示、非表示します。


HTML構造、もっと簡略化できますが、.....


<div id="sample-x" class="sample-box">
	<div class="photo-box"><img src="/main/images/lady01s.png" /></div>
</div>

全てに「ID」があれば走査する手間が省け速度も速くなるのですが、現実にはそうは参りません。


<div id="ラッスンゴレライ" class="sample-box">
	<div id="アッタカインダカラ" class="photo-box"><img id="アケミチャン" src="hosogai.png" /></div>
</div>

---------------------------------------------------
通常、朱美チャンは箱入り娘

朱美チャン、お昼ですよオキナハレ
$('#アッタカインダカラ').fadeIn(400);

見つけ易いし早い、朱美チャンでてらしゃーい
$('#アケミチャン').fadeIn(400);

朱美チャン、あわてて隠れる
$('#アケミチャン').hide(1);

朱美チャン故障、細貝さん電話「モシモシ、朱美チャンがERRORなんですが....」
$('#アケミチャン').hide(0);

書き方は色々あります。オブジェクトを保存する3番目が一番早くなります。jQueryオブジェクトを保存して処理する
フェードする対象を一旦非表示にして、アクションに応じて、フェードする対象をフェードイン、フェードアウトします。

「ID」は直ぐ見つけるので「ID」があった方が良い。「クラス」は走査に時間がかかる。


$('#sample-x')はjQueryオブジェクトです。

一般的な書き方
$('#sample-x').children('.photo-box').hide(200);//一旦非表示
$('#sample-x').click(function(){
	$('#sample-x').children('.photo-box').fadeToggle(400);
});

走査は、.children() .find()等のフィルターを利用したほうが早い

---------------------------------------------------
ここで$(this)は$('#sample-x')の参照

$('#sample-x').children('.photo-box').hide(200);//一旦非表示
$('#sample-x').click(function(){
	$(this).children('.photo-box').fadeToggle(400);//こうも書ける
});

---------------------------------------------------
jQueryオブジェクトを保存すると認識反応が早くなる

var sample_x=$('#sample-x');
var photo_box=sample_x.children('.photo-box').hide(200);//一旦非表示
sample_x.click(function(){
	photo_box.fadeToggle(400);//フェード
});
---------------------------------------------------

フェードトグル
photo_box.fadeToggle(400);
スライドトグル
photo_box.slideToggle(400);
ショートグル
photo_box.toggle(400);

スライドの場合、画像は % では無く px のほうがスライドらしくなる。フェードは関係なし。


速度

速度はミリ秒単位で与えますが、次の文字列を使用できます。
fast 200ミリ秒、normal 400ミリ秒、slow 600ミリ秒、
以前よりですが、遅くて(長い時間)600ミリ秒であることに留意ください。マシン環境もよくなりましたので、600ミリ秒以上も可能ですが、遅い「携帯」等も有りますのでそれらを考慮した速度設定が必要です。

HTMLの場合、速度が遅いほど、対象面積が大きいほど、画像フェードの場合は、画像が大きいほど、幾重かの階層構造単位、マシン環境が悪い場合など、負荷が大きくなります。



jQueryオブジェクト.show("fast");//200
jQueryオブジェクト.show("normal");//400
jQueryオブジェクト.show("slow");//600

----------------------------------------------

jQueryオブジェクト.hide(1);
は下と同じ効果です、速度0はエラーに成る
jQueryオブジェクト.css({'display':'none'});

私の場合、800ミリ秒以上にする事はほとんどない。(それ以上は法外と考えている)


イージング

イージングはjQueryで swing linear のどちらかを選べます。初期値は swing です。
その他のイージング設定には、「jquery.easing.1.3.js」を利用します。Bounce系を除いては、速度が速いため(600以内)ほとんど区別がつきませんので、現在の環境では無意味と言うことです。
swing linear 以外を使用することは余り無いとおもいますが、下記参照ください。

【プラグイン】: jQuery Easing Plugin (version 1.3)



設定なき場合は swing で実行される
jQueryオブジェクト.show(600);//swing

linear設定
jQueryオブジェクト.show(600,"linear");//linear

----------------------------------------------

JSの読み込み
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

easeOutBounce設定
jQueryオブジェクト.show(600,"easeOutBounce");

jQuery.easing.def="easeOutBounce";
この処理によってイージングの設定が省略されると「easeOutBounce」をデフォルトとして利用するようになります
jQueryオブジェクト.show(600);//easeOutBounce

私の場合、イージングの設定はほとんどしない。(速度が早いので現在無意味に近いから)


構造、CSSの条件によっては振る舞いが違ってきます。サンプル参照ください。

 

 

書式自体が簡単ですので、ポジション設定を変えた場合、画像を 100% 100px で設定した場合などの違いをみてみたいと思います。以下のサンプルの様になります。


show()、hide()、と toggle()

show()は縦横の大きさを変化させますので、動きは対角線方向になります。大きさ0より元の大きさに戻ります。

hide()は反対の動き(消す)になりますので、show()と対で使用される場合が多い。
また簡単に消せるので、fadeIn() slideUp() slideDown の前処理用として良く使用される。

縦横の大きさが設定されていない場合は、jQueryが大きさを算出して実行されます。
ポジションが top:0 left:0 の場合であり、ポジション設定が違う場合は違う振る舞いをします。



一旦消す
jQueryオブジェクト.hide(400);

表示する
jQueryオブジェクト.show(400);

トグル
jQueryオブジェクト.toggle(400);

hide()について

jQueryオブジェクトを一旦消す場合に重宝なので、良く使用される。
その後、show()、fadeIn()、slideDown()、等に処理を移行するにも都合が良い。


仮に以下の様な構造があるとする。以下サンプルは同じ構造です。


<div id="photo"><img /><div>

前処理として、hide()で消す。時間は随意である。


次の処理のために一旦消す、fade slide でも共通です
$('#photo').hide('fast');

その後
show表示なら
$('#photo').show('slow');
fade表示なら
$('#photo').fadeIn('slow');
slide表示なら
$('#photo').slideDown('slow');

上の処理終了後、消したいなら。時間は随意である。


hideなら
$('#photo').hide('slow');
fadeなら
$('#photo').fadeOut('slow');
slideなら
$('#photo').slideUp('slow');

上記の構造では、消した場合に display:noneが実行されるので画像領域が完全に無くなる。(アコーディオンでは便利だ)
画像領域の大きさを確保したいならば、以下の様に画像の大きさのラップをしておけばよい。中は消えるが領域は残る。


<div>
	<div id="photo"><img /><div>
</div>

show サンプル

サンプルHTML構造は全て画像がdivでラップされた形で使用しています。


<div class="photo-box"><img src="/main/images/lady01s.png" /></div>

画像は 100% 100% 設定、画像外側の「div要素」に show hide toggle のアニメアクションを実行します。
但し「中の文字」は小さくはなりません。

画像がDIVでラップされている場合、画像 100% 100% と画像 100px 100px 設定では違いが有ります。


SAMPLE 001: CLICK

clickでshow()、表示します。

SAMPLE 002: CLICK

clickでhide()、非表示します。

SAMPLE 003: toggle

下BOXをclickで 表示 非表示。


CLEARして再実行します / RESET(画像100%)RESET / RESET(画像100px)RESET

 

show accordionサンプル

下のバーをCLICKして下さい。次の要素を表示、非表示します。
特別にラップがない場合は hide() が display:none のため、このページのHTMLの高さが変わります。


show Accordion CLICKして下さい

表示、非表示が繰り返されます。


<p id="accordion-1" class="black-box-sample"> show Accordion CLICKして下さい</p>
<div class="accordion-block">
</div>

//Accordion-1 toggle
(function($){

	//Accordion
	$(function(){

		//オブジェクトを保存
		var accordionItem=$('#accordion-1');
		//一旦消す
		accordionItem.next('.accordion-block').hide(200);
		//click-action
		accordionItem.click(function(){
			//toggle
			$(this).next().toggle(400);

		});

	});

})(jQuery);

 

 

fadeIn()、fadeOut()、と fadeToggle()

fadeIn()は透明度を1に変化させます。大きさの変化はありません。

fadeOut()は透明度を0に変化させます。最後に非表示(display:none)になります。

fadeToggle()はfadeIn()、fadeOut()を交互に繰り返します。



fadeで消す
jQueryオブジェクト.fadeOut(400);

fadeで表示する
jQueryオブジェクト.fadeIn(400);

fadeでトグル
jQueryオブジェクト.fadeToggle(400);

fade サンプル

画像は 100% 100% 設定、画像外側の「div要素」に fadeIn fadeOut fadeToggle のアニメアクションを実行します。
但し「中の文字」の大きさ変化は有りません。

fadeの場合大きさ変化がないので、画像 100% と画像 100px 設定での違いは有りません。


SAMPLE 004: CLICK

clickでfadeIn()、表示します。

SAMPLE 005: CLICK

clickでfadeOut()、非表示します。

SAMPLE 006: toggle

下BOXをclickで fade表示 非表示。


CLEARして再実行します / RESET(画像100%) RESET / RESET(画像100px) RESET

 

fade accordionサンプル

下のバーをCLICKして下さい。次の要素をfade表示、非表示します。
特別にラップがない場合は fadeOut() が display:none のため、このページのHTMLの高さが変わります。


fade Accordion CLICKして下さい

fade表示、非表示が繰り返されます。


<p id="accordion-2" class="black-box-sample"> show Accordion CLICKして下さい</p>
<div class="accordion-block">
</div>

//Accordion-2 toggle
(function($){

	//Accordion
	$(function(){

		//オブジェクトを保存
		var accordionItem=$('#accordion-2');
		//一旦消す
		accordionItem.next('.accordion-block').hide(200);
		//click-action
		accordionItem.click(function(){
			//toggle
			$(this).next().fadeToggle(400);

		});

	});

})(jQuery);

 

 

fadeTo()

fadeTo()は透明度を現在の値より、指定の値に変化させます。
fadeIn() fadeOut()では対処できない場合に利用します。
具体的には Overlay等 の透明度を途中で指定の値で止める場合、サムネールの透明度変化、などでしょうか。
(以前、IEでCSS設定するより簡単なので良く使用した)


書式

ビルドインスタイルの fadeTo() の書式は以下の通りです。
イージングを使用することは余りないと思います。ここでは説明していませんが、引数にオプションを設定することはできません。

fadeOut()ではオブジェクトは非表示(display:none)になりますが、
fadeTo()で透明度0にしてもオブジェクトが「透明人間」で残ります(display:noneではない)のでその違いを認識ください。



jQueryオブジェクト
$("対象アイテムID名など")

透明度は opacity の値 0-1 の範囲です
jQueryオブジェクト.fadeTo(速度,透明度 [,function]);
jQueryオブジェクト.fadeTo(速度,透明度 [,イージング] [,function]);

速度 透明度の省略はできません
jQueryオブジェクト.fadeTo(400,1);

----------------------------------------------

透明度を指定の値に
jQueryオブジェクト.fadeTo(600,0.5);

瞬時に透明度 0.8 になる、結構便利
jQueryオブジェクト.fadeTo(1,0.8);

//functionがある場合
jQueryオブジェクト.fadeTo(400,0.8,function(){
	//処理を書く
});

----------------------------------------------

注意、hide()から初めてもOK
jQueryオブジェクト.hide(200);
透明度 0.8 になる
jQueryオブジェクト.fadeTo(600,0.8);


注意、display:none には成らないので
jQueryオブジェクト.fadeTo(400,0);
元に戻すには
jQueryオブジェクト.css({'opacity':1});

fadeTo サンプル

fadeIn fadeOutと同じ様に見えても、違いが有りますので注意ください。


SAMPLE 020: CLICK

clickでfadeTo()します。透明度0.5に

SAMPLE 021: CLICK

clickでfadeTo()します。透明度0に


CLEARして再実行します / RESET



 

 

slideDown()、slideUp()、と slideToggle()

slideDown()は対象オブジェクトをDownさせます。

slideUp()は対象オブジェクトをUpさせます。最後に非表示(display:none)になります。

slideToggle()はslideDown()、slideUp()を交互に繰り返します。

Down,Upはポジションが top:0 left:0 の場合であり、ポジション設定が違う場合は違う振る舞いをします。横方向のスライドは「ビルドインスタイル」では有りません。(jquery.ui.jsにはあるが、簡単に作れます)



slideで消す
jQueryオブジェクト.slideUp(400);

slideで表示する
jQueryオブジェクト.slideDown(400);

slideでトグル
jQueryオブジェクト.slideToggle(400);

slide サンプル

画像は 100% 100% 設定、画像外側の「div要素」に slideDown slideUp slideToggle のアニメアクションを実行します。
但し「中の文字」の大きさ変化は有りません。ポジション設定の違いで振る舞いが違います。

画像がDIVでラップされている場合、画像 100% 100% と画像 100px 100px 設定では違いが有ります。


● ポジションが top:0 left:0 の場合 (標準)、標準で下に開くからDown、上に閉じるからUpの意味と思います。

SAMPLE 007: CLICK

clickでslideDown()、表示します。

SAMPLE 008: CLICK

clickでslideUp()、非表示します。

SAMPLE 009: toggle

下BOXをclickで slide表示 非表示。


● ポジションが bottom:0 left:0 の場合 (途中、対象オブジェクトのポジション変更は出来ません)
振る舞いが反対ですが、このような利用は余りないと思います。デモページのスライドショー、画像pxにして応用しています。

SAMPLE 010: CLICK

clickでslideDown()、表示します。

SAMPLE 011: CLICK

clickでslideUp()、非表示します。

SAMPLE 012: toggle

下BOXをclickで slide表示 非表示。


CLEARして再実行します / RESET(画像100%) RESET / RESET(画像100px) RESET


【注意】、slideDown slideUp slideToggle の場合、上記サンプルの画像は正常に処理されています。
但し、文字の有るブロックでは、ポジション position:absolute、の影響で文字が消えずに残ることがありますので、別途処理が必要な場合があります。

 

slide accordionサンプル (slideToggle)

下のバーをCLICKして下さい。次の要素をslide表示、非表示します。
特別にラップがない場合は slideUp() が display:none のため、このページのHTMLの高さが変わります。


slide Accordion CLICKして下さい

slide表示、非表示が繰り返されます。


<p id="accordion-3" class="black-box-sample"> slide Accordion CLICKして下さい</p>
<div class="accordion-block">
</div>

//Accordion-3 toggle
(function($){

	//Accordion
	$(function(){

		//オブジェクトを保存
		var accordionItem=$('#accordion-3');
		//一旦消す
		accordionItem.next('.accordion-block').hide(400);
		//click-action
		accordionItem.click(function(){
			//toggle
			$(this).next().slideToggle(400);

		});

	});

})(jQuery);

 

● slideToggle は Accordion または Caption の表示に多用されますので、具体的には実際に自分で作ってみないとなかなか理解し難い。下記アコーディオンサンプル例のページ中段記載「slideToggleの効率化」等を参考にして実際に動かしてみてください。さすれば理解が深まるでしょう。

【参照】当方の記事: jQuery色々なアコーディオン


 

slideとfadeの組み合わせ

show() fadeIn() slideToggle() toggle() 等のビルドインスタイルの場合は、同じ「jQueryオブジェクト」に対して「同時処理」が出来ません。同じ「jQueryオブジェクト」の場合は「順次処理」になります。
但し「jQueryオブジェクト」が違う場合は「同時処理」は可能です。時間差を付けるのも方法です。

出来ることが限定されるし面倒なので、組み合わせることはあまり無いと思います。



同じjQueryオブジェクト同時はNGです、(動作する場合も有る)
jQueryオブジェクト.slideDown(400);
同じjQueryオブジェクト.fadeIn(400);

違うjQueryオブジェクト同時はOKです
jQueryオブジェクト.slideDown(400);
同じjQueryオブジェクト.children('img').fadeIn(400);//違うオブジェクトに成る

完了してからならOKです
jQueryオブジェクト.slideDown(400,function(){
	同じjQueryオブジェクト.children('img').fadeIn(400);
});

同じjQueryオブジェクトの「同時処理」はカスタムアニメーション animate() を利用したほうが無難です。


下記の様に、同じjQueryオブジェクト同時に記載すると「fadeInのあとにfadeOutする」
例外なので、混乱するし、使用する事もないと思うので覚えないほうが良い。(間に.delayをはさむことも可能であるが)


fadeInのあとに直ぐfadeOutする
jQueryオブジェクト.fadeIn(400);
同じjQueryオブジェクト.fadeOut(400);

点滅にはつかえるかナ

slideとfadeの組み合わせサンプル(参考)

● 013ポジション top left ●014.015ポジション bottom left の場合
画像をfade、BOXをslide。かなり面倒ですから、余り利用しないでしょう。

SAMPLE 013: CLICK

clickでslideDown()、と画像fade()

SAMPLE 014: CLICK

clickでslideDown()、と画像fade()

SAMPLE 015: toggle

下BOXをclickで slideとfade


CLEARして再実行します / RESET(画像100px) RESET

 


//SLIDE-FADE TOP BOTTOM
(function($){

	//sample013 top
	$(function(){

		var speed=600;
		var image_box=$('#sample013').find('.photo-box');//box
		var image=$('#sample013').find('.photo-box').children('img').addClass("set-px");
		image_box.hide(200);
		image.hide(200);

		$('#sample013-btn').children('.test-btn').click(function(){
			effect();
		});

		function effect(){
			image.fadeIn(speed);//image
			image_box.slideDown(speed);//box
		}

	});

})(jQuery);

(function($){

	//sample014 bottom
	$(function(){

		var speed=600;
		var image_box=$('#sample014').find('.bottom-box');//box
		var image=$('#sample014').find('.bottom-box').children('img').addClass("set-px");
		image_box.hide(200);
		image.hide(200);

		$('#sample014-btn').children('.test-btn').click(function(){
			effect();
		});

		function effect(){
			image.fadeIn(speed);//image
			image_box.slideDown(speed);//box
		}

	});

})(jQuery);

(function($){

	//sample015 bottom toggle
	$(function(){

		var speed=600;
		var sample_box=$('#sample015').find('.sample-box');//box
		var image_box=$('#sample015').find('.bottom-box');//box
		var image=$('#sample015').find('.bottom-box').children('img').addClass("set-px");
		image_box.hide(200);
		image.hide(200);

		sample_box.click(function(){
			image.fadeToggle(speed);//image
			image_box.slideToggle(speed);//box
		});

	});

})(jQuery);

 

左右のslide(参考)

左右のslideはビルドインスタイルのslideには有りませんので、新たにカスタムアニメーション、animate() で作ります。

zuzuzu

 

スライドは単なるポジションの移動ですから、現在の位置から指定するポイントに先に移動し、animate()を実行するだけです。
移動させて於く場所によって左右上下でも自由にスライドさせることが出来ます。
大きさ、透明度の変更などにより、簡単に十数種のエフェクトが出来ます。


1. ポジションの移動のため、position:absolute の方が正確です。
2. 隠すために、移動する「jQueryオブジェクト」の親(ラップdiv)は overflow:hidden にする必要がある。
3. スライドのみなら、画像は 100% 100px でも同じで有る。
4. 構造をつくる、旨く配置するCSSの基礎が必要になります。


● HTML構造、
移動するjQueryオブジェクトを「photo-box」クラスとすれば、親の「sample-box」クラスは必ず overflow:hidden であること。
場合によっては、中の img を動かす時もある。


<div class="sample-box">
	<div class="photo-box"><img /></div>
</div>

--------------------------------------------------------

sample-box{
overflow:hidden;
}

● 下記、animate()は画像が 100px のため 100px ずらして配置し、原点 0 0 に移動させている。
イージングは区別が付かないので略す、初期値 swing が設定される。

カスタムアニメーションでは、オブジェクト {,,,}が同時に実行されます。



右から左に移動する場合

一旦boxを右に移動して隠す
jQueryオブジェクト.css({'top':0,'left':100});
原点に移動
jQueryオブジェクト.animate({'top':0,'left':0},速度);

勿論ここではtopの値は同じであるから、X方向のみ移動しても同じ結果
jQueryオブジェクト.animate({'left':0},速度);

---------------------------------------------

右に隠すなら
jQueryオブジェクト.css({'top':0,'left':-100});
上に隠すなら
jQueryオブジェクト.css({'top':-100,'left':0});
下に隠すなら
jQueryオブジェクト.css({'top':100,'left':0});

原点 00 に移動 animate() はそのままで良い

---------------------------------------------

function設定の場合、無名関数を使用するのが多い
jQueryオブジェクト.animate({'top':0,'left':0},速度,function(){
	//処理を書く
});

● スライドとフェードを同時に実行するには、透明度 opacity を処理すれば良い。
つまり、CSSで数値のもの(width height 等)なら、大きさも全て変化可能といえる。


右から左に移動とフェードする場合

一旦boxを右に移動して隠す、透明度0
jQueryオブジェクト.css({'top':0,'left':100,'opacity':0});
原点に移動とフェードIN
jQueryオブジェクト.animate({'top':0,'left':0,'opacity':1},速度);

カスタムアニメーション、animate() については次回、次のページで述べる予定です。

【参照】当方の記事: jQuery アニメーション animate()


左右のslide サンプル(参考)

● ポジション top left、画像 100px、(ポジション移動だから画像100%でも同じ)
BOXを左右にカスタムアニメーション animate() で slide します。

SAMPLE 017: CLICK

clickで右から左にslide

SAMPLE 018: CLICK

clickで左から右にslide

SAMPLE 019: toggle

下BOXをclickで 交互にslide


CLEARして再実行します / ● RESET(画像100px) RESET

 

 

アニメーションを軽くする

アニメーションが重い場合にアニメーションを軽くする方法を考えて見ます。
アニメーションが重くなるのは次の様な場合が多い。


1. ページ表示直後は多くの画像読み込み、JS処理などが集中するので重くなる。
2. 大きな画像を読み込んでいる時、または多くの画像を読み込んでいる時。
3. Flashを実行している時。(手の打ちようがないので避けるのが重要)
4. 大きな画像画像をフェードさせる時。(透明度の設定がスコブル重い)
5. 大きな、複雑な構造を一括にアニメーションさせる時。
6. マシン環境が悪い場合。(性能が悪い、古い、水冷式で金魚を飼っている、など)


アニメーションが重いと言う人の場合、ほとんどが「アニメーション不可能」な「法外な設定」が多い。


以上のような原因がありますので、それらを避ける処理が必要になります。少し遅延させてアニメーションを実行する手立てなど必要です。アニメーション自体を考えて見ますと、


フェード

ブラウザ処理では透明度の変化が一番重いのでフェードさせる対象の面積を小さくする、或いは複雑な構造一括フェードをしない、フェードの時間を短くする、複数のオブジェクトを同時にフェードしないなどを考慮します。


● 複雑な構造一括フェードをしない

必ず中には、フェードをしなくとも良い要素もありますので、非表示にすれば負荷が減ります。フェード完了後に表示させれば良いだけ。大きな構造は分割して順次フェードしても見栄えを損なうものではない。
時として、構造を変えなければならない状況にも成るので、手間がかかるし記述も多くなるがズルをしないことが重要と思います。


zuzu

 

● 複数のオブジェクトを同時にフェードしない

同時にフェードさせると負荷が大きく、マシン環境が悪い場合は旨く動作しませんので、出来るだけ時間差を付けるか、順次フェード処理する。これらの処理で「感じ」が多少変わっても生かし方ない。



delayは引数のない hide() show() には利用できません

仮に
$('#photo-1').fadeIn(600);
$('#photo-2').fadeIn(600);
$('#photo-3').fadeIn(600);
なら

遅延させる
$('#photo-1').fadeIn(600);
$('#photo-2').delay(200).fadeIn(600);
$('#photo-3').delay(400).fadeIn(600);
//時間調整
setTimeout(function() {
	//次の処理に進む
},1500);

● 順次に、function を加えてフェード処理するほうが処理し易い


フェードが重なる時がないのでスムーズに処理できる

$('#photo-1').fadeIn(600,function(){

	$('#photo-2').fadeIn(600,function(){

		$('#photo-3').fadeIn(600,function(){

			//次の処理に進む
		});
	});
});

● 大きい画像を長くフェードさせるのは危険

画像フェード処理が遅い場合が多いので、JSの処理が狂う場合も有る。
特に画像処理の遅いFirefox、マシン環境の悪い場合は起こりがちなので注意。(画像処理が遅く、JS処理は早いのでJSが先行してしまう結果と思う)


こんな場合はfadeIn(またはfadeOut)終了前に次に進んでしまう場合が多い

$('大きい画像').fadeIn(長い時間数,function(){

	$('小さい画像').fadeIn(600,function(){
		//
	});
});

-----------------------------------------------------

対処方法、タイミング調整する
setTimeout値は状況を確認して決める

$('大きい画像').fadeIn(長い時間数,function(){
	//タイミング調整
	setTimeout(function() {

		$('小さい画像').fadeIn(600,function(){
			//
		});

	},400);
});

● 適正なアニメーション時間(速度)、画像の大きさは

正確には答えられない、マシン性能などが向上すればそれなりになるが、多少マシン環境の悪い場合でも「ページ表示」時にスムーズに動作することが基本であろう。

私の場合、現時点でアニメーション時間(速度)、1200ミリ秒。画像、640x480 前後を限度としている。
5-6年後にはマシン性能も向上、古いマシンも淘汰されて条件は違ってくるとおもいますが....期待しましょう


jQueryオブジェクトを保存して処理する (重要)

jQueryオブジェクトを保存して処理するとスムーズに成る。具体的には下記を参照ください。



例えば
$('#photo-1').hide(200);
$('#photo-1').fadeIn(600,function(){
	//
});

jQueryオブジェクト、$('#photo-1')、を変数 photo1 に保存(キャッシュ)して利用する
変数名などは自由である

var photo1=$('#photo-1');
photo1.hide(200);
photo1.fadeIn(600,function(){
	//
});

---------------------------------------------------

jQueryオブジェクトを保存していない変数を使うとエラーになるので注意
photo2.hide(200);//ERROR

jQueryオブジェクト、$('#photo-1')、が登場するたびにjQueryはDOMを参照するので効率的ではない。
保存することにより直ぐに参照できるので処理が早くなる。頻繁に処理するjQueryオブジェクト程効率よくなる。
特にマシン環境の悪い場合は効果絶大である。ID名の方が処理は早い。

【参考】to-Rの記事: jQueryを良くする25のTIPS

 

スライド

show slide 系の場合はフェード処理と違って比較的軽い動作をしますから、余り気にせずとも良いと思います。
但し、画像のような効果は出ない場合がありますので期待しないでください。その時の構造それなりです。


 

サンプルのHTML、JS、CSS

このページでの、サンプルのHTML、JS、CSS、はページの都合で下記別ページに掲載します。

サンプルのHTML JS CSS 資料

 


 

jQuery 3.0 / jQuery Compat 3.0 alpha リリースの重要変更

alpha版ですが、2015/06/13 jQuery 3.0がリリースされ show fade slide に重要変更があります。
現在のjQueryでは、下記の様な display:none 記述であっても、jQueryが処理してくれましたが、その部分を制御する処理が煩雑になりすぎ、パフォーマンスにも影響を与えるために処理を簡素化したとの事です。
正式のリリースではないので、今後変更があるかはまだ判りませんが...


例えば、none の要素をshow表示できた。(fadeIn()、slideDownも同様です)

大きさなど設定無しでも、jQuery側で調べて適正に処理してくれたので大変親切なものでした。


以前は処理したが、jQuery3.0ではダメ

$('#box').css({'display':'none'});
$('#box').show(400);

jQuery3.0では、display:none の要素を処理出来ないため、下記の様にしなければならない。
fadeIn()、slideDownも同様である。今からクセにしておけば良いと思う。


非表示ならば一旦表示してから次の処理を行う
$('#box').css({'display':'block'});

常に対にして使用すればOK
$('#box').hide();
$('#box').show(400);

$('#box').hide();
$('#box').fadeIn(400);

$('#box').hide();
$('#box').slideDown(400);

処理の内容によっては面倒になる場合もあると思いますが、工夫しましょう。


jQuery 3.0 alpha リリースについては下記記事を参照ください。

【参照】バシャログの記事: jQuery 3.0 / jQuery Compat 3.0 alpha がリリースされたので調べてみた

 



jQuery日本語リファレンス関連サイトは以下の通りです。詳細などは参考にして下さい。

【参考】semooh.jpの記事: jQuery日本語リファレンス

【参考】js.studioの記事: jQueryの日本語リファレンス(翻訳)

【参考】jquerystudy.infoの記事: jQuery入門リファレンス

 

カスタムアニメーション、animate() については次のページに記事があります。

【参照】当方の記事: jQuery アニメーション animate()

 



以上です。

 


[ この記事のURL ]


タグ:Effect , jquery

 

ブログ記事一覧

年別アーカイブ一覧



[1]