2022年04月24日

jquery：animate()

animate() はjQueryメソッドで下記の2つのタイプがあります。

■基本タイプ：普通のCSSプロパティを変更する事によりアニメーションを行います。

■拡張タイプ：CSSの transform プロパティを変更する事によりアニメーションを行います。

基本タイプ

普通のCSSプロパティを変更する事によりアニメーションを行います。

メソッド

セレクタ.animate( properties , duration , easing , complete )

パラメータ

properties (文字列)（必須）

CSSのプロパティ名を指定します。

指定方法：{プロパティ①：値, プロパティ②：値 ,・・・}

duration (整数)（省略可）

アニメーションの実行時間

初期値：400ms

指定方法は下記の文字列でも可

・'slow' :600msec

・'normal':400msec

・'fast' :200msec

easing (文字列)（省略可）

アニメーションの速度調整を実行するイージング関数の名前を指定します。

イージング関数としては 'linear' と 'swing' があります

初期値：'swing'

あまり違いは感じられないので、無視して良いと思います。

complete (関数)（省略可）

アニメーション終了後に実行する関数

事例

1. 文字サイズを変更するアニメーション

文字サイズの変更は font-size を animate で変更します。

アニメーション文字

上記のボタンに設定されているアニメーションは下記になります。

ボタン名

設定値

絶対値指定：文字サイズを40pxに変更する

（1秒かけて）

$(セレクタ).animate({fontSize:40},1000);

複数クリック可

相対値指定：文字サイズを5px増やす

（400msで）

$(セレクタ).animate({fontSize:'+=5'});

複数クリック可

相対値指定：文字サイズを5px減らす

（400msで）

$(セレクタ).animate({fontSize:'-=5'});

メモ１

font-sizeプロパティ等はマルチワード記法（プロパティ名にハイフンが付く場合）になっています。

これをanimateで指定する場合は、キャメル記法（ハイフンを省き次の文字を大文字にする）に変更する必要があります。

・font-size -> fontSize

・margin-left -> marginLeft

メモ２

プロパティの値の指定方法には[絶対値指定]と[相対値指定]があります。

絶対値指定：数字を指定します。

相対値指定：'+=n' 又は '-=n' で表記します。ｎは数値。

'+=n' ：nを加算します。

'-=n' ：nを減算します。

上記のプログラムは下記になります。

<div style='display:flex;'>
	<button type='button' class='text_40'>40pxに変更</button>
	<button type='button' class='text_up'>少し大きく</button>
	<button type='button' class='text_down'>少し小さく</button>
	<button type='button' class='text_reset'>リセット</button>
</div>
<div class='text_taget'>アニメーション文字</div>
<style>
	.text_taget{font-size:25px;color:blue;font-weight:bold;margin-top:10px;}
	.text_up , .text_down , .text_reset{margin-left:10px;}
</style>
<script>
	$(function(){
		$('.text_40').click(function(){
			$('.text_taget').animate({fontSize:40},1000);
		});
		$('.text_up').click(function(){
			$('.text_taget').animate({fontSize:'+=5'});
		});
		$('.text_down').click(function(){
			$('.text_taget').animate({fontSize:'-=5'});
		});
		$('.text_reset').click(function(){
			location.reload();
		});
	});
</script>

2.幅や高さを変更するアニメーション

幅や高さの変更は width と hight を animate で変更します。

上記のボタンに設定されているアニメーションは下記になります。

ボタン名	設定値
複数クリック可	相対値指定：幅と高さを20増やす $(セレクタ).animate({width:'+=20',height:'+=20'});
複数クリック可	相対値指定：幅と高さを20減らす $(セレクタ).animate({width:'-=20',height:'-=20'});
複数クリック可	相対値指定：幅と高さを2倍にする $(セレクタ).animate({width:$(セレクタ).width()2,height:$(セレクタ).height()2});
複数クリック可	相対値指定：幅と高さを1/2にする $(セレクタ').animate({width:$(セレクタ).width()/2,height:$セレクタ).height()/2});
消去後、もう一度クリック	toggle指定：垂直方法に開閉する $(セレクタ).animate({height:'toggle'});
消去後、もう一度クリック	toggle指定：水平方法に開閉する $(セレクタ).animate({width:'toggle'});

メモ３

プロパティの値に、jQueryのメソッドを使って乗算や除算を行う事ができます。

width:$(セレクタ).width()*2

width:$(セレクタ).width()/2

メモ４

プロパティの値に、'toggle'、'hide'、'show' を使う事ができます。

'toggle'はその場所での開閉になります。

'hide'や'show'の使い方は次の事例で紹介します。

上記のプログラムは下記になります。

<div style='display:flex;'>
	<button type='button' class='box_up'>少し拡大</button>
	<button type='button' class='box_down'>少し縮小</button>
	<button type='button' class='box_multiplied'>乗算</button>
	<button type='button' class='box_divided'>除算</button>
	<button type='button' class='box_toggle_v'>垂直開閉▼▲</button>
	<button type='button' class='box_toggle_h'>水平開閉▼▲</button>
	<button type='button' class='box_reset'>リセット</button>
</div>
<div class='box_taget'></div>
<style>
	.box_taget{width: 100px; height: 100px; border: 1px solid black; background-color: yellow;margin-top:10px;}
	.box_down , .box_multiplied , .box_divided , .box_toggle_v , .box_toggle_h , .box_reset{margin-left:10px;}
</style>
<script>
	$(function(){
		$('.box_up').click(function(){
			$('.box_taget').animate({width:'+=20',height:'+=20'});
		});
		$('.box_down').click(function(){
			$('.box_taget').animate({width:'-=20',height:'-=20'});
		});
		$('.box_multiplied').click(function(){
			$('.box_taget').animate({width:$('.box_taget').width()*2,height:$('.box_taget').height()*2});
		});
		$('.box_divided').click(function(){
			$('.box_taget').animate({width:$('.box_taget').width()/2,height:$('.box_taget').height()/2});
		});
		$('.box_toggle_v').click(function(){
			$('.box_taget').animate({height:'toggle'});
		});
		$('.box_toggle_h').click(function(){
			$('.box_taget').animate({width:'toggle'});
		});
		$('.box_reset').click(function(){
			location.reload();
		});
	});
</script>

3.移動と消去を行うアニメーション

移動は top と left、表示/非表示は opacity（不透明度）を animate で変更します。

移動して消去した場合は、リセットで元に戻してください。

上記のボタンに設定されているアニメーションは下記になります。

ボタン名	設定値
トグルになっています。	toggle指定：フェードイン・アウトで開閉します。 $(セレクタ).animate({opacity:'toggle'},1000);
リセットボタンで元に戻します。	hide指定：右に移動させて非表示 $(セレクタ).css('position', 'relative'); $(セレクタ).animate({opacity:'hide',left:300},1000);
リセットボタンで元に戻します。	hide指定：下に移動させて非表示 $(セレクタ).css('position', 'relative'); $(セレクタ).animate({opacity:'hide',top:300},1000);

メモ５

opacity(不透明度)指定には、'toggle'（フェードで開閉）、'hide'（非表示）、'show'（表示）があります。

top や left を使ってターゲットを移動させる場合は、ターゲットのCSSを下記の様に変更する必要があります。

$(ターゲット).css('position', 'relative');

top や left の移動量の指定は[絶対値指定]と[相対値指定]があります。

上記の事例は[絶対値指定]でその位置まで移動するアニメーションになります。

上記のプログラムは下記になります。

<div style='display:flex;'>
	<button type='button' class='triangle_fade'>フェードイン/アウト▼▲</button>
	<button type='button' class='triangle_right'>右に移動させて非表示</button>
	<button type='button' class='triangle_down'>下に移動させて非表示</button>
	<button type='button' class='triangle_reset'>リセット</button>
</div>
<div class='triangle_taget'></div>
<style>
	.triangle_taget{
		width: 0;height:0;
		border-right:50px solid transparent;
		border-bottom:86.6025px solid red; /* 高さは√3/2×(50+50) */
		border-left:50px solid transparent;
		margin-top:10px;}
	.triangle_right , .triangle_down , .triangle_reset{margin-left:10px;}
</style>
<script>
	$(function(){
		$('.triangle_fade').click(function(){
			$('.triangle_taget').animate({opacity:'toggle'},1000);
		});
		$('.triangle_right').click(function(){
			$('.triangle_taget').css('position', 'relative');
			$('.triangle_taget').animate({opacity:'hide',left:300},1000);
		});
		$('.triangle_down').click(function(){
			$('.triangle_taget').css('position', 'relative');
			$('.triangle_taget').animate({opacity:'hide',top:300},1000);
		});
		$('.triangle_reset').click(function(){
			location.reload();
		});
	});
</script>

4.要素を移動させるアニメーション

移動は top と left を animate で変更します。

投げるボタンは相対値指定なので、何回も投げられます。

上記のボタンに設定されているアニメーションは下記になります。

ボタン	設定値
	ボールを一周させます $(セレクタ).css('position', 'relative'); $(セレクタ).animate({left: '+=500'} ,1000) ; $(セレクタ).animate({top: '+=200'} , 1000) ; $(セレクタ).animate({left: '-=500'} ,1000) ; $(セレクタ).animate({top: '-=200'} ,1000) ;
	ボールをバウンドさせます。 $(セレクタ).css('position', 'relative'); $(セレクタ) .animate( { top: '-=10' } , 200 ) .animate( { top: '+=10' } , 200 ) .animate( { top: '-=7' } , 150 ) .animate( { top: '+=7' } , 150 ) .animate( { top: '-=4' } , 100 ) .animate( { top: '+=4' } , 100 ) .animate( { top: '-=2' } , 70 ) .animate( { top: '+=2' } , 70 ) ;
	ボールを投げます $(セレクタ).css('position', 'relative'); $(セレクタ) .animate({top:'-=20',left:'+=10'},200).animate({top: '+=20' , left: '+=10'},200) .animate({top:'-=10',left:'+=10'}, 150).animate({top:'+=10' , left: '+=10' },150) .animate({top: '-=4',left:'+=10' },100).animate({top:'+=4' , left: '+=10'},100) .animate({top: '-=2',left:'+=10' }, 70) .animate({top:'+=2' ,left: '+=10' },70) .animate({top: '-=1',left: '+=10' }, 70).animate({top: '+=1' , left: '+=10' },70);

メモ６

周回のケースは、4つの動作で構成されています。（セミコロンが4個）

バウンドのケースは、1つの動作の中に8個の動きがあります。（セミコロンは1個）

[$(セレクタ).animate().animate().animate()・・・;]

投げるのケースは、バウンドの上下の運動の各々に移動を加えて、ボールが転がる様子を表現しています。

上記のプログラムは下記になります。

<div style='display:flex;'>
	<button type='button' class='ball_round'>周回</button>
	<button type='button' class='ball_bound'>バウンド</button>
	<button type='button' class='ball_throw'>投げる</button>
	<button type='button' class='ball_reset'>リセット</button>
</div>
<div class='ball_taget'></div>
<style>
	.ball_taget{width:30px;height:30px;border-radius:50%;background-color:red;margin-top:10px;}
	.ball_bound , .ball_throw , .ball_reset{margin-left:10px;}
</style>
<script>
	$(function(){
		$('.ball_round').click(function(){
			$('.ball_taget').css('position', 'relative');
			$('.ball_taget').animate({left: '+=500'} ,1000) ;
			$('.ball_taget').animate({top: '+=200'}  , 1000) ;
			$('.ball_taget').animate({left: '-=500'} ,1000) ;
			$('.ball_taget').animate({top: '-=200'}  ,1000) ;
		});
		$('.ball_bound').click(function(){
			$('.ball_taget').css('position', 'relative');
			$('.ball_taget')
				.animate({top: '-=10'} , 200 ).animate({top: '+=10'} , 200 )
				.animate({top: '-=7' } , 150 ).animate({top: '+=7' } , 150 )
				.animate({top: '-=4' } , 100 ).animate({top: '+=4' } , 100 )
				.animate({top: '-=2' } , 70 ) .animate({top: '+=2' } , 70 ) ;
		});
		$('.ball_throw').click(function(){
			$('.ball_taget').css('position', 'relative');
			$('.ball_taget')
				.animate({top:'-=20',left:'+=10'},200)  .animate({top: '+=20' , left: '+=10'},200)
				.animate({top:'-=10',left:'+=10'}, 150) .animate({top:'+=10' , left: '+=10' },150)
				.animate({top: '-=4',left:'+=10' },100) .animate({top:'+=4' , left: '+=10'},100)
				.animate({top: '-=2',left:'+=10' }, 70) .animate({top:'+=2' ,left: '+=10' },70)
				.animate({top: '-=1',left: '+=10' }, 70).animate({top: '+=1' , left: '+=10' },70);
		});
		$('.ball_reset').click(function(){
			location.reload();
		});
	});
</script>

拡張タイプ

CSSのtransformプロパティは、ターゲット要素を回転、拡大縮小、傾斜、移動することできます。

ここでは animate の中で transform を利用したアニメーションを解説します。

メソッド

セレクタ.animate( properties , options )

パラメータ

properties (文字列)

transformの実行回数をセットするプロパティを設定します。

例①：ユーザの新設プロパティを使う場合

{count : 20} ：countはどの様な名前でもOKです。

下記事例は上記のプロパティを利用しています。

例②：既存のCSSプロパティを使う場合

zIndex は表示優先順位プロパティなので現在の図形に関係ないのでこれを使う事ができます。

{zIndex：20}：

options

オプションには下記の物があります。

オプション名

値

duration（整数)

（省略可）

アニメーションの実行時間

初期値：400ms

easing（文字列)

（省略可）

イージング関数としては 'linear' と 'swing' があります

初期値：'swing'

step（関数)

ここに transform を利用したアニメーションを記述します。

'rotate()' ：中心回転

'rotateY()' ：Y軸回転

'rotateX()' ：X軸回転

'translateX()'：X軸移動

上記以外にも色々ありますが、ここでは省略します。

complete (関数)

（省略可）

アニメーション終了後に実行する関数を定義します。

上記を使ったjQueryの基本形

$(function(){
	$('ボタン').click(function(){
		$('ターゲット').animate({count:2},{
           duration:1000,
           step:function(count) {$(this).css({transform:'rotate(' + count*90 + 'deg)'});},
           complete:function(){$(this).css('count', 0);}
  		})
	});
});

■3行目のcountプロパティが2なので、5行目のstepは2回、実行されます。

■1回目はcountが1なので90°まで回転し、2回目でcountが2なので180°まで回転します。

■上記の実行時間が4行目の1秒です。

■アニメーション終了後、countプロパティの値を0にリセットしています。

事例

上記のボタンに設定されているアニメーションは下記になります。

ボタン	設定値
	transform の rotate を使って回転させます step:function(count) {$(this).css({transform:'rotate(' + count*90 + 'deg)'});} countに1~2の値が返されるので、90°、180°でターゲットを回転させます。
	transform の rotateY を使ってY軸で回転させます step:function(count) {$(this).css({transform:'rotateY(' + count*360 + 'deg)'});}, countに1～10の値が返されるので、最終的に10回転します。
	transform の rotateX を使ってX軸で回転させます step:function(count) {$(this).css({transform:'rotateX(' + count * 360 + 'deg)'});}, countに1～10の値が返されるので、最終的に10回転します。
	transform の translateX を使ってX軸方向に移動させます。 step:function(count) {$(this).css({transform:'translateX(' + count * 30 + 'px)'});}, countに1～10の値が返されるので、最終的にX軸に300px移動します。
	transform の移動とX軸回転を合わせて実行します。 step:function(count) {$(this).css({transform:'translateX(' + count * 30 + 'px) rotateX(' + count*90 + 'deg)'});}, countに1～20の値が返されるので、最終的にX軸に600px、X軸に（90×20÷180=10回転）します。
	transform の translateX を0にします。 step:function(now) {$(this).css({transform:'translateX(0)'})},

上記のプログラムは下記になります。

<div style='display:flex;'>
	<button type='button' class='rotate'>回転</button>
	<button type='button' class='rotate_y'>Y軸回転</button>
	<button type='button' class='rotate_x'>X軸回転</button>
	<button type='button' class='trans_x'>X軸移動</button>
	<button type='button' class='trans_rotate'>回転と移動</button>
	<button type='button' class='trans_reset'>元に戻す</button>
</div>
<div class='transform_taget'></div>
<style>
	.transform_taget{
		width:100px; /* 幅 */
		border-bottom:80px solid green; /* 高さ */
		border-left	:15px solid transparent; /* 左側下辺の伸び */
		border-right:15px solid transparent; /* 右側下辺の伸び */
		margin-top:10px;}
	.rotate_y , .rotate_x , .trans_x  , .trans_rotate , .trans_reset{margin-left:10px;}
</style>
<script>
	$(function(){
		$('.rotate').click(function(){
			$('.transform_taget').animate({count:2},{
    		duration:1000,
   			step:function(count) {$(this).css({transform:'rotate(' + count*90 + 'deg)'});},
    		complete:function(){$(this).css('count', 0);}
  		})
		});
		$('.rotate_y').click(function(){
			$('.transform_taget').animate({count:10},{
    		duration:800,
   			step:function(count) {$(this).css({transform:'rotateY(' + count*360 + 'deg)'});},
    		complete:function(){$(this).css('count', 0);}
  		})
		});
		$('.rotate_x').click(function(){
			$('.transform_taget').animate({count:10},{
    		duration:800,
   			step:function(now) {$(this).css({transform:'rotateX(' + now * 360 + 'deg)'});},
    		complete:function(){$(this).css('count', 0);}
  		})
		});
		$('.trans_x').click(function(){
			$('.transform_taget').animate({count:10},{
    		duration:800,
   			step:function(now) {$(this).css({transform:'translateX(' + now * 30 + 'px)'});},
    		complete:function(){$(this).css('count', 0);}
  		})
		});
		$('.trans_rotate').click(function(){
			$('.transform_taget').animate({count:20},{
    		duration:3000,
   			step:function(now) {$(this).css({transform:'translateX(' + now * 30 + 'px) rotateX(' + now*90 + 'deg)'});},
    		complete:function(){$(this).css('count', 0);}
  		})
		});
		$('.trans_reset').click(function(){
			$('.transform_taget').animate({count:10},{
    		duration:2000,
   			step:function(now) {$(this).css({transform:'translateX(0)'})},
    		complete:function(){$(this).css('count', 0);}
  		})
		});
	});
</script>