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

書き方

まず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'});
});

• サンプルを見る

• jQuery Easing Plugin

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');
}
});

• サンプルを見る