jQueryのanimateを使ったアニメーション

Javascript

今回はjQueryのanimateを使って、要素をアニメーションさせる方法を試してみようと思います。

本当はCSSのアニメーションだけで済めば良いのですが、特にIEを考えると難しいところです。そこでjQueryを使っての基本的な方法をおさらいしておきたいと思います。

書き方

まずanimateの書き方ですが、このような感じ。

animate(params, [duration], [easing], [complete]);
animate(params, options);

2通りありどちらの書き方でも動きます。

1つめの書き方はそれぞれ引数を指定する方法で、2つめは連想配列で指定できるようになっています。今回は2つ目の連想配列の方法で説明していきます。

params

ここには、アニメーションさせたいスタイルを書きます。

$('#btn01').click(function(){
	$('#box01').animate({left: '350px'});
});

duration

ここには、アニメーション全体にかかる時間をミリ秒単位書きます。デフォルトの値は400です。 また数値以外にも、slow・normal・fastといった指定もできます。

以下のコードは3秒で移動します。

$('#btn02').click(function(){
	$('#box02').animate({left: '350px'}, {duration: 3000});
});

easing

アニメーションの動きを調整する項目です。

値によって加減速がついて、要素がアニメーションします。デフォルトの値はswingです。

このままだと指定できる項目が、「liner」と「swing」の2つですが、 jQuery Easing Pluginを使うことによって様々な効果を得られます。

$('#btn03').click(function(){
	$('#box03').animate({left: '350px'},{duration: 3000, easing: 'easeInQuad'});
});

complete

アニメーションが完了した時の処理を書きます。

以下のサンプルはアニメーションを実行したあと、要素内に「完了」というテキストを出します。

$('#btn04').click(function(){
	$('#box04').animate({left: '350px'},{duration: 3000, easing: 'easeInQuad', complete: function(){$(this).text('完了');}});
});

step

アニメーション中に実行される処理を指定します。

2つの引数を受け取れてそれぞれ、

  • now 現在の状態
  • fx
    • elem アニメーション中の要素
    • start 最初
    • end アニメーション最後
    • prop 現在のアニメーション状態

の値が受け取れます。

$('#btn05').click(function(){
	$('#box05').animate({left: '500px'},{duration:1000, easing:'easeInOutQuart', complete: function(){$(this).text('完了');} ,step: function(now, fx){$('#steps').text(now)}});
});

queue

falseを指定すると、続けて書いてある処理がすぐ実行されるようになります。

$("#box07").click( function(){
	$(this)
	.animate({width: '400px'},{duration: 1500, queue: false})
	.animate({height: '50px'},{duration: 500})
});

値の説明はここまでです。次は連続動作です。

連続で動かす

連続で動かしたい場合はanimateを続けて書けばよいです。

$("#box08").click( function(){
	$(this)
	.animate({width: '400px'},{duration: 1500})
	.animate({height: '50px'},{duration: 500})
	.animate({width: '50px'},{duration: 500})
});

複数の要素を連続で動かす

別々の要素を連続して動かしたい場合はこのようにします。

$('#box09').animate({left: '350px'},{duration: 2000, easing: 'easeOutQuad', complete: 
	function(){  
		$('#box10').animate({left: '300px',opacity: 0},2000, 'easeOutQuad');  
    }  
});

というわけで、animateの基本的な使い方でした。