POPSブログ

jQuery アニメーション animate()

360

  Category:  jquery2015/06/15 pops 

jQuery カスタムアニメーション animate() についての使用方法と注意点などに関することです。意外と簡単に利用できます。

 

jQuery アニメーションの種類

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

 

[ 目次 ]

 

1. アニメーションのコツ CSSの知識が大事
2. カスタムアニメーション
. 2-1 書式、速度、イージング等
. 2-2 アニメーションの停止、stop()
. 2-3 アニメーションの遅延、delay()
. 2-4 フェードの注意点
3. 原点に移動と伸縮 TRANSITION
. 3-1 1、ラップの外側に配置して原点に移動する方法 簡単
. 3-2 2、ラップの内側(外側)に配置して移動と伸縮する方法
. 3-3 3、ラップの内側に配置して伸縮する方法 面倒
4. 簡単なカスタムアニメーションのサンプル
5. サンプルのJS、CSS

 

 

カスタムアニメーションの簡単な説明


アニメーションのコツ

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


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


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


カスタムアニメーション

ビルドインスタイルの show() fadeIn() slideToggle() toggle()等では対処できない場合に、カスタムアニメーションを使用しますが至って簡単なものです。

位置、大きさ、透明度など、CSSで数値で設定しているものが対象になります。


1. 一括しての同時アニメが可能ですから、細やかな動作変更等が出来ます。
2. アニメーションよりCSSが大事ですからそれらの知識を持ちます。
3. ビルドインスタイルのアニメーションと組み合わせればより効果的に作業できます。
4. 旧式のIE8、IE9に対応することは考慮しない事が大事。
(再起不能なほど酷い目にあう、ヤメトキナハレ)


書式、速度、イージング等


書式

カスタムアニメーション animate() の書式は以下の通りです。
その他にも、step、queue、options、等の書式設定はありますが、これらを使用することはほぼ無いと思いますので省略します。
必要な方は「リファレンス」記事などを参照ください。


シンプルなアニメーションの書式


stepやqueueの設定が必要ない場合はanimate(prop)の構文を利用した方が簡単です

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

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

● 簡単に書けば、速度200で、位置を原点に移動、大きさを200にします。


jQueryオブジェクト.animate({'left':0,'width':200},200);

勿論こうも書ける、変化の無いところは省略も可能
jQueryオブジェクト.animate({'top':0,'left':0,'width':200,'height':200},200);


速度が早いため、イージングが判らないので省略することが多い
速度、イージング、を省略された場合は、速度 400、イージング swing、に成ります


なるべく速度は省略しないほうが良い
jQueryオブジェクト.animate({'left':0,'width':200},200);

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

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

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

function設定の場合2、処理形態は好みです
jQueryオブジェクト.animate({'left':0,'width':200},200,関数名);

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

ここで、{'left':0,'width':200} はオブジェクトですから、
下記の様にも処理出来ます。どのように処理するかはその時の状態で決定しますが、これは好みですか...


変数名は自由

var obj={'left':0,'width':200};
jQueryオブジェクト.animate(obj,200);

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

あるいは
var obj=new Object();
obj.left=0;
obj.width=200;
jQueryオブジェクト.animate(obj,200);

● 簡単な話、jQueryオブジェクトが $('#slide-elm') で在れば、
現在の位置、大きさより、位置0、幅200に移動アニメを実行します。

使用頻度の高い、jQueryオブジェクトなどは、下記の様に保存(キャッシュ)して利用すると早くなります。


$('#slide-elm').animate({'left':0,'width':200},200,function(){
	//アニメ終了後の処理
});

早く認識させるなら
var slide_elm=$('#slide-elm');
slide_elm.animate({'left':0,'width':200},200,function(){
	//アニメ終了後の処理
});

上記のことなどに関しては、下記、to-Rさんの記事を参照ください。

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


● TEST1、下の灰色BOXをクリックください。移動後1秒経過したら元に戻ります。



		var click_item=$('#click-item');
		var slide_elm=$('#slide-elm');
		slide_elm.css({'left':600,'width':20});

		click_item.click(function(){
			slide_elm.animate({'left':10,'width':100},400,function(){
				//アニメ終了後の処理
				slide_elm.delay(1000).animate({'left':600,'width':20},400);
			});
		});

● 通常アニメは位置、大きさ、透明度の変化が大半の作業で有る。

次の形式を覚えれば良い。スコブル簡単である。


//オブジェクト保存と速度設定
var slide_elm=$('#slide-elm');
var speed=600;

//初期位置、大きさ、透明度をCSSで設定する、初期の透明度は0が主
slide_elm.animate({'top':位置Yの値,'left':位置Xの値,'width':初期の幅,'height':初期の高さ,'opacity':初期の透明度});

//アニメで変化させる
slide_elm.animate({'top':終了位置Yの値,'left':終了位置Xの値,'width':終了時の幅,'height':終了時の高さ,'opacity':1},speed,function(){
	//アニメ終了後の処理
});

速度

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

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



同じで有る
jQueryオブジェクト.animate({'left':0,'width':200},600);
jQueryオブジェクト.animate({'left':0,'width':200},"slow");

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

省略すれば、400ミリ秒で実行される
jQueryオブジェクト.animate({'left':0,'width':200});

私の場合、800ミリ秒以上にする事はほとんどない。(それ以上は法外と考えている)
一応、速度設定などは自由ですから、あくまでも使用者の判断で決定ください。


イージング

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

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


実際のイージングは次のシミュレーション 1[ ラップの外側に配置して原点に移動する方法 ]で確認できます。



設定なき場合は swing で実行される
jQueryオブジェクト.animate({'left':0,'width':200},600);

linear設定
jQueryオブジェクト.animate({'left':0,'width':200},600,"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オブジェクト.animate({'left':0,'width':200},600,"easeOutBounce");

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

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


アニメーションの停止、stop()

アニメーションの実行中に停止したい場合の処理になりますが、通常はアニメーションが残っていて他に影響がある場合、終了処理に進む場合などで利用します。少々理解し難いと思います。
queueは利用しませんが、アニメ設定で登録されますので、stop()の折にはqueueを削除した方が良いと思います。


● 現在動作中のアニメの停止


アニメ実行なら
jQueryオブジェクト.animate(...............);

現在動作中のアニメのqueueを削除して、一旦停止出来ます
jQueryオブジェクト.stop(true);

● アニメーションが残っていて他に影響がある場合、影響を除去する一旦停止ですからどちらでも良いと思います。
その後、本来の処理を実行します。


jQueryオブジェクト.stop();
または
jQueryオブジェクト.stop(true);

本来の処理を実行
.
.

● 複数のアニメの停止は、それぞれ stop() すれば良い。


アニメ設定のjQueryオブジェクト1.stop(true);
アニメ設定のjQueryオブジェクト2.stop(true);

● 第2引数を true にすると、現在のアニメを一旦停止して、アニメ描画のゴールの描画を実行します。
但し、次に別のアニメがあればそれを実行しますから注意が必要です。(現在のアニメの停止です)

ゴールの描画を実行か、別画面に推移するかなどは、その時の設計などにより違ってきます。これは好みですか...


アニメ実行中
jQueryオブジェクト.animate({'left':0,'width':200},600);
現在動作中のアニメのqueueを削除して、一旦停止、ゴールを描画
jQueryオブジェクト.stop(true,true);

アニメ時間は消滅して停止後即座に次の処理が行われる、
jQueryオブジェクト.css({'left':0,'width':200});

● TEST2、下の灰色BOXをクリックください。移動後1秒経過したら元に戻ります。(STOPがある為アニメ時間は長く設定)
往復のアニメですから「ゴール」が2つ存在します。STOPのタイミングで振る舞いが違います。

アニメ中停止してゴールに移動。STOP



		click_item.click(function(){
			slide_elm.animate({'left':10,'width':100},2000,function(){
				//アニメ終了後の処理
				slide_elm.delay(1000).animate({'left':600,'width':20},2000);
			});
		});

		//stop
		$('#stop-btn').click(function(){
			//ゴールに戻り、2番実行する
			slide_elm.stop(true,true);
		});

● 終了処理などではアニメ停止後、jQueryオブジェクトは削除される場合が多い。
アニメ実行中に「終了ボタン」が押された場合など有効である。

アニメが終了状態であっても、大事を取り一旦 stop() 処理している例が多い。
remove()すればアニメもイベントも全て無くなる。


終了処理
jQueryオブジェクト.stop(true);
jQueryオブジェクト.remove();
.
.

仮に「アニメが終了してから、何々に進む」なんて書いてあっても、人は「守る」とは限りません。


特殊な stop()

同じjQueryオブジェクトに2つのアニメが設定されているのでゴールが2つある。簡単にstopして初期位置に戻れない場合、
下記の様にしてだます。つまり、2番目のアニメが出来ない様にしている。

このような「ゴマカシ」は自分で見つける外方法は有りません。


● TEST3、下の灰色BOXをクリックください。移動後1秒経過したら元に戻ります。
往復のアニメですから「ゴール」が2つ存在します。STOPのタイミングで振る舞いが違います。

アニメ中停止してゴールの描画をCSSで別途に実行。STOP



		click_item.click(function(){
			slide_elm.animate({'left':10,'width':100},2000,function(){
				//アニメ終了後の処理
				slide_elm.delay(1000).animate({'left':600,'width':20},2000);
			});
		});

		//stop
		$('#stop-btn2').click(function(){
			//2番アニメ実行しない強制で原点に戻る
			slide_elm.stop(true);slide_elm.css({'left':600,'width':20});
		});

● アニメーションはCSSである事のだまし。アニメーション終了後はCSSが書き換えれれますから....


アニメ途中でCSS設定が面倒だ
slide_elm.css({'left':600,'width':20});
CSS設定より負荷はあるが、同じ結果である
slide_elm.animate({'left':600,'width':20},1);

アニメーションの遅延、delay()

アニメーションを指定時間遅延させることができますが、アニメーションのjQueryオブジェクトに設定するので、使用は限定されますので多少使い勝手が悪いとおもいます。無いよりマシです。


1. アニメーション設定のjQueryオブジェクトに限定。
2. アニメーション実行直前に設定する。
3. 画像を分割して色々なパターンで表示する時に利用できます。
当方の記事、簡易SLICE-PHOTO-2



animate()の直前に時間はミリ秒設定
jQueryオブジェクト.delay(1000).animate({'left':0,'width':200},600);

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

必ずしも整数値でなくとも記述できるので非常に助かる

var time=100/3;
jQueryオブジェクト.delay(time).animate(.........)

フェードの注意点

最も注意しなければならないのはフェードです。
透明度の変化はブラウザに大きな負荷を与えますので、大きな画像を長い時間フェードすることは避けてください。
画像を含まない場合は比較的軽い。マシン環境でも違いますのでブラウザで十分確認が必要です。

この点に関しては、前ページでも詳述していますので、参照ください。


● フェードイン
先にCSSで透明度を 0 にしておいて animate() を実行するだけですが、位置、大きさなどを同時に変化できるのが利点です。
フェードに関しては、イージングは linear の方が多少 swing より良いかも知れません。



一旦透明度0をに
jQueryオブジェクト.css({'opacity':0});
アニメーション実行
jQueryオブジェクト.animate({'opacity':1},400);

linear
jQueryオブジェクト.animate({'opacity':1},600,"linear");

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

移動伸縮を加える
jQueryオブジェクト.animate({'left':0,'width':200,'opacity':1},400);


 

 

原点に移動と伸縮

zu-zu-zuzu

 

一種の TRANSITION といえるものです。
位置の移動、BOX大きさの変化、中の画像の幅高さ設定によりEFFECTを作る、透明度も変化できるので色々なTRANSITION効果を得ることが出来る。
問題はポジション設定(top bottom left right)が数値はかえれるが、種類を初期設定から変更できない事である。
(工夫をすれば可能だが面倒である)


1. スライドはポジション移動のみでできる、最初の位置で変化が決まる。
2. 伸縮、スケール変化は、画像を100%にしてBOXの大きさを変えればよい。
3. 描画範囲の伸縮は、画像をpxにしてBOXの大きさを変えればよいが、BOXはoverflow:hiddenにする。
4. フェードは透明度を変化させればよい。
5. 同時にアニメーション出来るので組み合わせが可能です。


そこで、ポジション設定(top left)でどのように変化するか見てみる。


1. ラップの外側に移動して、ラップの原点(top left)にポジション移動する方法と、
2. ラップの内側と外側に移動して、ラップの原点(top left)にポジション移動と伸縮を組み合わす方法、
3. ラップの内側にポジション設定を変えて配置(top bottom left right)して、幅、高さを伸縮させる方法の3種類が考えられます。(3番は理想的ではあるが面倒である)
4. ポジション設定(top bottom left right)の専用階層を4つ用意してそこで処理する。まだ試したことが無い、面倒....


どぶろっく、女女女女女女女女女の説明図 (キットコンナジョウタイナンデショウ)

zuzuzuzu

 

1番は、設定など楽ですが、変化の半分はラップの外側で行うために中途半端な面があります。
2番は、伸縮専用になりますので使用が限定されるでしょう。全てが理論通りには行かない場合があります。
3番は、ポジション設定変更が困難なために、インスタンスをその都度新規に作らねば成らない手間が有ります。
(新規に作ればポジション設定は自由だ。キャッシュを削除しなければならないが、....)


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


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

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

.sample-box{
overflow:hidden;
}

場合によっては
.photo-box{
overflow:hidden;
}

 

1、ラップの外側に配置して原点に移動する方法

移動する方法は top left の数値をアニメで変更するだけですのでスコブル簡単です。
全て、原点 0 0 に向かいます。伸縮を加えることも可能です。


シミュレーション 1

BOX clickでslideを実行します。/ slideを実行後右ボタンでRESET出来ます。 RESET

sumu-zu

 

zuzu

SLIDE切替移動 : left right down up / BL TR BR TL / c-W c-H c-WH

透明度切替 : none fade fade変化がわかり難い

画像幅の切替 : 200px 100%

幅高さの伸縮切替 : 固定 伸縮 伸縮は画像幅100%推奨

速度の切替 : 200 400 600 800

イージング切替 : swing linear easeOutBounce easeInQuad

c-W c-H c-WH、は原則、画像幅「100%」、幅高さ「伸縮」設定で利用します。



 

2、ラップの内側(外側)に配置して移動と伸縮する方法

ポジション設定が、top left固定ですが、伸縮のみです。一部ポジションを外側に配置したものは修正のために原点に移動します。初期状態で上、左、に配置下場合は伸縮になりますので、純然たるスライドでは有りません。
上記1番の方法を改良したものですが、全て旨く動作するものではない。

ポジション設定が、top left固定の弊害で、思い道理に行かないものも有る。(中の画像を移動させるなどの処理で修正可能な場合もある)


シミュレーション 2

BOX clickでslideを実行します。/ slideを実行後右ボタンでRESET出来ます。 RESET

画像配置が違いますので注意。

sumu-zuzu

 

zuzu

SLIDE切替移動 : left right down up / BL TR BR TL / c-W c-H c-WH

透明度切替 : none fade fade変化がわかり難い

画像幅の切替 : 200px 100%

幅高さの伸縮切替 : 伸縮 伸縮は画像幅100%推奨

速度の切替 : 200 400 600 800

イージング切替 : swing linear easeOutBounce easeInQuad

c-W c-H c-WH、は原則、画像幅「100%」、幅高さ「伸縮」設定で利用します。



 

3、ラップの内側に配置して伸縮する方法

zuzuzuzu-zu

 

ポジション設定が、top right、bottom right、など伸縮する方向により違ってきます。
同じオブジェクトで、何回もポジション設定を変えられませんので、その都度インスタンスを作りポジション設定をします。

新規に作ればポジション設定は自由だが、削除してもオブジェクトはのこるので、そのキャッシュなども削除しなければならないので少々注意が必要です。面倒なので利用することは余りないでショウ。

興味のある方は別のデモページで確認ください。[ デモページ ]


 

簡単なカスタムアニメーションのサンプル

簡単なサンプルです。改造すれば色々使えますが、うまく行かない場合は悩んでください。

 

右からフェードとスライド(Toggle)

sample1

● 下のBOX「click」でマリンチャン画像を、少し右からフェードとスライドします。

fadeInが余りよくないのが特徴です(fadeOutは良いのですが)、一応、linear にしていますが効果は無い。

オラ、マリンチャンが嫌いだ!
用も無いのに「リーチ」で出てきて、ハズス!。性格が非常に悪い!


右からスライド(Toggle)

sample2、下のsample8と比較してみてください。

● 下のBOX「click」で写楽君画像を、右からスライドします。


中央から拡大縮小(Toggle)

sample3

● 下のBOX「click」でアナチャン女王画像を、中央から拡大縮小します。


中央から2段階で拡大縮小(Toggle)

sample4

● 下のBOX「click」で、あばれる君画像を、中央から2段階で拡大縮小します。
顔を変形してアバレテいます。大変、ご苦労様で御座います。


中央から拡大縮小(ランダム)

sample5

拡大率 0

● 下のBOX「click」毎に、で朱美チャン画像を中央位置でランダム拡大縮小します。(拡大率 0 - 2.25)
ランダムですから、同じ拡大率になる場合も有ります。再度クリックください。(画像は拡大するとぼけます)


クロスフェード(PUFF)

sample6

● 下のサムネール「click」で「女、女、女、オンナー」画像をクロスフェードします。
一部、異物混入しておりますが、食べても害はありません。


右下から拡大縮小(Toggle)

sample7

● 下のBOX「click」で画像を、右下から拡大縮小します。


右から描画範囲のスライド(Toggle)

sample8、上のsample2と比較してみてください。

sample2、SLIDEleftは単なるスライドである。これを描画範囲の拡大縮小に変更します。ポジション設定を変えればよい。
但し、途中で数値は変更できるが、ポジション設定は変更できないので注意が必要です。

● 下のBOX「click」で画像描画範囲を、右から拡大縮小します。



/* sample8 */
.slide-box3{
position:absolute;top:0;right:0;
display:block;
width:200px;
height:200px;
margin:0;
padding:0;
overflow:hidden;
}
.slide-box3 img{
position:absolute;top:0;right:0;
width:200px;
height:200px;
margin:0;
padding:0;
}

 

サンプルのJS、CSS


参考JS



//test-1
(function($){

	//test-1
	$(function(){

		var click_item=$('#click-item');
		var slide_elm=$('#slide-elm');
		slide_elm.css({'left':600,'width':20});

		click_item.click(function(){
			slide_elm.animate({'left':10,'width':100},400,function(){
				//アニメ終了後の処理
				slide_elm.delay(1000).animate({'left':600,'width':20},400);
			});
		});
	});

})(jQuery);

//test-2
(function($){

	//test-2
	$(function(){

		var click_item=$('#click-item2');
		var slide_elm=$('#slide-elm2');
		slide_elm.css({'left':600,'width':20});

		click_item.click(function(){
			slide_elm.animate({'left':10,'width':100},2000,function(){
				//アニメ終了後の処理
				slide_elm.delay(1000).animate({'left':600,'width':20},2000);
			});
		});

		//stop
		$('#stop-btn').click(function(){
			//ゴールに戻り、2番実行する
			slide_elm.stop(true,true);
		});

	});

})(jQuery);

//test-3
(function($){

	//test-3
	$(function(){

		var click_item=$('#click-item3');
		var slide_elm=$('#slide-elm3');
		slide_elm.css({'left':600,'width':20});

		click_item.click(function(){
			slide_elm.animate({'left':10,'width':100},2000,function(){
				//アニメ終了後の処理
				slide_elm.delay(1000).animate({'left':600,'width':20},2000);
			});
		});

		//stop
		$('#stop-btn2').click(function(){
			//2番アニメ実行しない強制で原点に戻る
			slide_elm.stop(true);slide_elm.css({'left':600,'width':20});
		});

	});

})(jQuery);


//sample1
//右からフェードとスライド-Toggle
(function($){

	//sample1
	$(function(){

		var speed=600;
		var image_width=200;
		var image_height=200;
		var slide_box=$('#slideboxWrap1');//wrap
		var image_box=$('#slideBox1');//box
		var image=image_box.children('img');

		//mess
		$('#slideboxWrap1 .slide-inner').css({'display':'none'});

		//初期位置と大きさ透明度
		image_box.css({'top':0,'left':image_width/4,'width':image_width,'height':image_height,'opacity':0});

		slide_box.click(function(){

			$(this).toggleClass("active");
			//hit分岐処理
			if ($(this).hasClass('active')) {
				//スライド
				image_box.animate({'top':0,'left':0,'opacity':1},speed,'linear',function(){
					$('#slideboxWrap1 .slide-inner').css({'display':'block'});//mass
				});

			} else {
				image_box.animate({'top':0,'left':image_width/4,'opacity':0},speed,'linear');//スライド
				$('#slideboxWrap1 .slide-inner').css({'display':'none'});
			}

		});

	});

})(jQuery);

//sample2
//右からスライド-Toggle
(function($){

	//sample2
	$(function(){

		var speed=600;
		var image_width=200;
		var image_height=200;
		var slide_box=$('#slideboxWrap2');//wrap
		var image_box=$('#slideBox2');//box
		var image=image_box.children('img');

		//初期位置と大きさ
		image_box.css({'top':0,'left':image_width,'width':image_width,'height':image_height});

		slide_box.click(function(){

			$(this).toggleClass("active");
			//hit分岐処理
			if ($(this).hasClass('active')) {
				image_box.animate({'top':0,'left':0},speed);//スライド
			} else {
				image_box.animate({'top':0,'left':image_width},speed);//スライド
			}

		});

	});

})(jQuery);

//sample3
//中央から拡大縮小-Toggle
(function($){

	//sample3
	$(function(){

		var speed=600;
		var image_width=200;
		var image_height=200;
		var slide_box=$('#slideboxWrap3');//wrap
		var image_box=$('#slideBox3');//box
		var image=image_box.children('img');

		//初期位置と大きさ
		image_box.css({'top':image_height/2,'left':image_width/2,'width':0,'height':0});

		slide_box.click(function(){

			$(this).toggleClass("active");
			//hit分岐処理
			if ($(this).hasClass('active')) {
				image_box.animate({'top':0,'left':0,'width':image_width,'height':image_height},speed);//拡大
			} else {
				image_box.animate({'top':image_height/2,'left':image_width/2,'width':0,'height':0},speed);//縮小
			}

		});

	});

})(jQuery);

//sample4
//中央から2段階で拡大縮小-Toggle
(function($){

	//sample4
	$(function(){

		var speed=400;
		var image_width=200;
		var image_height=200;
		var slide_box=$('#slideboxWrap4');//wrap
		var image_box=$('#slideBox4');//box
		var image=image_box.children('img');

		//初期位置と大きさ
		image_box.css({'top':image_height/2,'left':image_width/2,'width':0,'height':0});

		slide_box.click(function(){

			$(this).toggleClass("active");
			//hit分岐処理
			if ($(this).hasClass('active')) {
				//拡大
				image_box.animate({'top':(image_height-50)/2,'left':0,'width':image_width,'height':50},speed,function(){
					//残り
					image_box.animate({'top':0,'left':0,'width':image_width,'height':image_height},speed);
				});
			} else {
				//縮小
				image_box.animate({'top':(image_height-50)/2,'left':0,'width':image_width,'height':50},speed,function(){
					//残り
					image_box.animate({'top':image_height/2,'left':image_width/2,'width':0,'height':0},speed);
				});
			}

		});

	});

})(jQuery);

//sample5
//中央から拡大縮小
(function($){

	//sample3
	$(function(){

		var speed=400;

		var base_width=300;
		var base_height=300;
		var image_width=200;
		var image_height=200;
		var scales=[0,.1,.25,.4,.5,.75,.9,1,1.1,1.1,1.2,1.35,1.5,1.75,2,2.25];

		var slide_box=$('#slideboxWrap5');//wrap
		var image_box=$('#slideBox5');//box
		var image=image_box.children('img');

		//初期位置と大きさ
		image_box.css({'top':base_height/2,'left':base_width/2,'width':0,'height':0});

		slide_box.click(function(){

			var scale_v=scales[Math.floor(Math.random()*scales.length)];//スケール値
			var pos_x=(base_width-image_width*scale_v)/2;
			var pos_y=(base_height-image_height*scale_v)/2;

			$('#slide-text5').text("拡大率 "+scale_v);

			image_box.animate({'top':pos_y,'left':pos_x,'width':image_width*scale_v,'height':image_height*scale_v},speed);//拡大


		});

	});

})(jQuery);

//sample6
//クロスフェード
(function($){

	//sample6
	$(function(){

		var speed=600;//速度 400-600
		var scale_v=2;//初期倍率 0.4-2
		var image_width=200;
		var image_height=200;
		var btn=[];

		var slide_box=$('#slideShowbox');//wrap
		var btm_box=$('#btmBox');//bottombox
		var top_box=$('#topBox');//topbox
		var btm_image=btm_box.children('img');
		var top_image=top_box.children('img');

		//初期位置と大きさ透明度
		btm_box.css({'top':0,'left':0,'width':image_width,'height':image_height,'opacity':1});

		//click
		$('#thumb-wrap').find('span').click(function(){

			var pos_x=(image_width-image_width*scale_v)/2;
			var pos_y=(image_height-image_height*scale_v)/2;

			//urlを取り出す
			var url=$(this).children('img').attr('src');
			//非表示でurlを入れる
			top_box=$('#topBox').css({'top':pos_y,'left':pos_x,'width':image_width*scale_v,'height':image_height*scale_v,'opacity':0,'display':'none'});
			top_image.attr({'src':url});
			//表示、透明
			top_box=$('#topBox').css({'display':'block'});
			//anime
			top_box.animate({'top':0,'left':0,'width':image_width,'height':image_height,'opacity':1},speed,function(){

				//下層表示、上層を消す
				btm_image.attr({'src':url});
				top_box.css({'display':'none'});
			});

		});
	});

})(jQuery);

//sample7
(function($){

	//sample7
	$(function(){

		var speed=600;
		var image_width=200;
		var image_height=200;
		var slide_box=$('#slideboxWrap7');//wrap
		var image_box=$('#slideBox7');//box
		var image=image_box.children('img');

		//初期位置と大きさ
		image_box.css({'top':image_height,'left':image_width,'width':0,'height':0});

		slide_box.click(function(){

			$(this).toggleClass("active");
			//hit分岐処理
			if ($(this).hasClass('active')) {
				image_box.animate({'top':0,'left':0,'width':image_width,'height':image_height},speed);//拡大
			} else {
				image_box.animate({'top':image_height,'left':image_width,'width':0,'height':0},speed);//縮小
			}

		});

	});

})(jQuery);

//sample8
(function($){

	//sample8
	$(function(){

		var speed=600;
		var image_width=200;
		var image_height=200;
		var slide_box=$('#slideboxWrap8');//wrap
		var image_box=$('#slideBox8');//box
		var image=image_box.children('img');

		//初期位置と大きさ/画像も移動する
		image_box.css({'top':0,'right':0,'width':0,'height':image_height});
		image.css({'top':0,'right':0,'width':image_width,'height':image_height});

		slide_box.click(function(){

			$(this).toggleClass("active");
			//hit分岐処理
			if ($(this).hasClass('active')) {
				image_box.animate({'width':image_width,'height':image_height},speed);//拡大
			} else {
				image_box.animate({'width':0,'height':image_height},speed);//縮小
			}

		});

	});

})(jQuery);


参考CSS




/* sample */
.slide-box-wrap{
position:relative;
display:block;
width:200px;
height:200px;
margin:0;
padding:0;
border:#FF0000 1px solid;
background-color:#000000;
overflow:hidden;
cursor:pointer;
}
.slide-box-wrap2{
position:relative;
display:block;
width:300px;
height:300px;
margin:0;
padding:0;
border:#FF0000 1px solid;
background-color:#000000;
overflow:hidden;
cursor:pointer;
}
.slide-box{
position:absolute;top:0;left:0;
display:block;
width:200px;
height:200px;
margin:0;
padding:0;
overflow:hidden;
}
.slide-box img{
width:200px;
height:200px;
margin:0;
padding:0;
}
.slide-box2{
position:absolute;top:0;left:0;
display:block;
width:200px;
height:200px;
margin:0;
padding:0;
overflow:hidden;
}
.slide-box2 img{
width:100%;
height:100%;
margin:0;
padding:0;
}

/* sample8 */
.slide-box3{
position:absolute;top:0;right:0;
display:block;
width:200px;
height:200px;
margin:0;
padding:0;
overflow:hidden;
}
.slide-box3 img{
position:absolute;top:0;right:0;
width:200px;
height:200px;
margin:0;
padding:0;
}

/* slideshow */
#slideShowbox.slide-show-wrap{
position:relative;
display:block;
width:200px;
height:200px;
margin:0;
padding:0;
overflow:hidden;
}
.slide-show-wrap .show-box{
position:absolute;top:0;left:0;
display:block;
width:200px;
height:200px;
margin:0;
padding:0;
overflow:hidden;
float:left;
}

.slide-show-wrap .show-box img{
width:100%;
height:100%;
margin:0;
padding:0;
}

#thumb-wrap{
display:block;
height:20px;
margin:5px 0 0 0;
padding:0;
}
#thumb-wrap .thumb-box{
display:inline;
width:20px;
height:20px;
margin:0 0 0 5px;
padding:2px;
}
#thumb-wrap .thumb-box img{
width:20px;
height:20px;
margin:0;
padding:0;
}

.slide-inner{
/*position:relative;top:0;left:0;*/
position:absolute;bottom:0;left:0;
display:block;
width:200px;
height:auto;
margin:0;
padding:0;
background-color:rgba(0,0,0,0.5);
/*opacity:0.5;*/
}
.slide-inner p{
margin:2px;
font-size:10px;
color:#FFFFFF;
}

/* test */
.click-test-item{
position:relative;
display:block;
width:640px;
height:40px;
margin:0;
padding:0;
background-color:#CCCCCC;
}
.slide-test-elm{
position:relative;
top:10px;left:600px;
display:block;
width:20px;
height:20px;
background-color:#FFD700;
}

.reset-btn{
padding:2px;
color:#FFFFFF;
background-color:#FF0000;
cursor:pointer;
}

.float-left{
float:left;
}

/*clear*/
.clear{
clear:both;
}


jQuery 「ビルドイン」スタイル、アニメーション show,fadeIn,slideToggle 等についの記事は前ページに有ります。

【参照】当方の記事: jQuery アニメーション show,fadeIn,slideToggle 等について

 

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

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

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

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

 



以上です。

 


[ この記事のURL ]


タグ:jquery , Effect , Transition

 

ブログ記事一覧

年別アーカイブ一覧



[1]