.animate()

CSSの値を指定して、アニメーションを表現します。

.animate( properties [, duration] [, easing] [, complete] ) 1.0追加

戻り値:jQuery

引数 説明
properties 型:PlainObject
最終的に変化させるCSSのキーと値のマップ値を指定します。
duration 型:Number or String
初期値:400
アニメーションする時間を指定します。
easing 型:String
初期値:swing
イージングの種類を指定します。
complete 型:Function()
アニメーションが完了した時に実行したい処理を指定します。

500ミリ秒かけて、leftを50pxの位置に不透明度を1に変化するアニメーションです。

$( "p" ).animate({
  left: 50, opacity: 1
}, 500 );

下記の例では、#clickme要素をクリックすると、#book要素が5秒かけて、アニメーションします。(引数easingは、省略されています) また、heightに指定されているのはカスタムアニメーションで、要素が表示されていれば徐々に高さが少なくなり0になって非表示、 要素が非表示ならば0から徐々に高さが増えていって表示、といった処理を行います。

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,    // 透明度0.25へ
    left: '+=50',     // 現在位置から右へ50px移動
    height: 'toggle'  // (カスタムアニメーション)
  }, 5000, function() {
    // アニメーション完了後に実行する処理
  });
});

.animate( properties, options ) 1.0追加

戻り値:jQuery

引数 説明
properties アニメーションで最終的に変化させるCSSのキーと値のマップ値を指定します。
options 各オプション値を設定します。詳細は下記の通りです。
duration
型:Number or String
初期値:400

アニメーションする時間を指定します。
easing
型:String
初期値:swing

イージングの種類を指定します。

queue
型:Boolean
初期値:true
falseを指定すると、キューに追加されずに即座にアニメーションを実行します。 1.7からは、文字列を指定することで追加するキューを指定できるようになりました。
specialEasing 1.4追加
型:PlainObject
1.4から追加された機能です。 CSSプロパティのマップ値を指定することで、その効果がイージングに反映されます(?)
step
型:Function( Number now, Tween tween )
各アニメーション要素の各アニメーションプロパティから呼び出される関数で、 アニメーションのフレームが進むたびに実行する処理を指定することが出来ます。 この関数が設定前のプロパティの値の変更を可能にしてくれること、トゥイーンオブジェクトを修正する機会を提供してくれます。
progress 1.8追加
型:Function( Promise animation, Number progress, Number remainingMs )
各アニメーションのステップ後に、アニメーションプロパティの数に関係なく、 アニメーション要素毎に1度だけ呼び出される関数です。
complete
型:Function()
アニメーションが完了した際に呼びだされる関数です。
done 1.8追加
型:Function( Promise animation, Boolean jumpedToEnd )
アニメーション完了後に呼び出される関数です。(Promiseオブジェクトは、resolveされています。)
fail 1.8追加
型:Function( Promise animation, Boolean jumpedToEnd )
アニメーションの完了が失敗した際に呼び出される関数です。(Promiseオブジェクトは、rejectされています。)
always 1.8追加
型:Function( Promise animation, Boolean jumpedToEnd )
アニメーションが正しく完了しているかに関係なく、完了または停止した際に呼び出される関数です。 (Promiseオブジェクトは、resolveまたはrejectのどちらかの状態です。)

500ミリ秒かけて、leftを50pxの位置に不透明度を1に変化するアニメーションします。 キューは無効を指定されています。

$( "p" ).animate({
  left: "50px", opacity: 1
}, { duration: 500, queue: false });

補足事項

アニメーションのプロパティと値について

.animate()メソッドはCSSプロパティを指定することで、アニメーションを実現させます。 このプロパティは指定できるプロパティが限定されていることを除き、.css()メソッドに指定する値と似ています。

アニメーションさせるために指定する値は、例外(詳細は後述)を除き数値であるべきです。 ほとんどの非数値の値では、jQueryの基本的な機能でアニメーション化させることが出来ません。 (例えば、width,height,left等はアニメーション化できますが、background-colorjQuery.Colorプラグイン抜きでは、アニメーション化することが出来ません) 特に指定が無ければ、指定した値はpx単位として扱われ、他に%emの単位を指定することが可能です。

加えて、scrollTopscrollLeftのようなスタイルプロパティではないカスタムプロパティも アニメーション化することが可能です。

CSSの略記(例: font, background, border)は、完全にはサポートされていません。 例えばもしborder幅をアニメーション化したい場合、少なくともborderスタイルと"auto"以外のborder幅を 事前に設定しておかなければなりません。 また、もしフォントサイズをアニメーション化したい場合、単に"font"ではなく、 "fontSize"またはCSSの"font-size"に該当するプロパティを指定する必要があります。

プロパティは数値に加え、'show','hide','toggle'の文字列を指定することも可能です。 これらの略記はdisplayプロパティを考慮した表示、非表示のカスタムアニメーションを可能にします。

また、値は+=-=を先頭につけて記述することも可能で、現在値からアニメーションの値を算出します。

アニメーションの略記メソッドである.slideDown()や.fadeIn()とは違い、.animate()はエフェクトによってhidden要素を可視化しません。 例えば、$('someElement').hide().animate({height:'20px'}, 500)と指定しても、要素は隠れたままになります。

Durationについて

Durationにはミリ秒単位の値を指定します。アニメーションには高い値を設定すれば遅くなり、低い値ならば速くなります。 初期値は400でミリ秒で、'fast'と'slow'の文字列を指定すると、前者は200ミリ秒、後者は600ミリ秒を指定したことになります。

アニメーション完了後に実行するコールバック関数について

complete引数に指定するコールバック関数は、アニメーション完了後に実行されます。 これは、一連の動作の中で異なるアニメーションを実現したい場合に有用です。 コールバック関数は引数を受け取れませんが、アニメーション化するDOM要素に引数を設定することが出来ます。 複数のDOM要素がアニメーション化された場合、マッチした各要素ごとにコールバック関数が実行されます。

その他、プロパティやアニメーションについて

位置を示すプロパティ(top, right, bottom, left)は、postionが初期設定でも指定されているstaticの場合は、 エフェクトを視認する事が出来ないことに注意してください。

jQuery UI は、色指定等の非数値プロパティが設定できるように、.animate()メソッドを拡張します。 また、個別にプロパティを指定するのではなく、class指定でアニメーションを行う機能も提供してくれます。

Step関数

2つ目の型の.animate()のoptionsにはstep関数を指定する項目があります。 この関数はアニメーションのステップ毎にコールバックとして呼び出され、 カスタムアニメーションを有効にした際や、アニメーションを変更したい場合に便利です。 step関数は2つの引数(nowとfix)を受け取る事ができ、アニメーション中のDOM要素に設定することが可能です。

now
現在のアニメーション状態のプロパティ値になります。
fx
jQuery.fx prototypeオブジェクトを参照します。 これには、いくつかのプロパティが含まれており、elemはアニメーション中の要素、 startとendはそれぞれ最初と最後のアニメーションのプロパティ値、 propは現在のアニメーション状態のプロパティ値です。

step関数は、各アニメーション要素上で各アニメーションされたプロパティに対して呼び出されることに注意してください。 例えば、2つのリスト項目が対象になっている場合、各ステップで4回step関数が実行されることになります。

$('li').animate({
  opacity: .5,
  height: '50%'
},
{
  step: function(now, fx) {
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
    $('body').append('<div>' + data + '</div>');
  }
});

イージングについて

引数easingには、イージング関数名を指定します。 イージング関数を指定することで、アニメーションの各ポイントでの速度を算出決定し、いわゆる緩急をつける働きをします。 jQueryにはswingとlinearの2つのイージング関数が用意されていますが、 jQuery UI に内包されているイージング関数 を使用することで、より多くの表現が可能になります。

また、 イージング用のjQueryプラグイン も用意されており、 イージング関数のチートシート を参照しながら使用すると便利です。

各プロパティ毎のイージングについて

jQuery1.4から各プロパティ毎にイージングを指定することができるようになりました。 最初のバージョンでは、1つ目にCSSプロパティ、2つ目にイージング関数の配列を指定します。 指定されたイージング関数が定義されてなければ.animate()で指定されているイージング関数が使用され、 その指定も無ければ'swing'が使用されます。

$('#clickme').click(function() {
  $('#book').animate({
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    opacity: 'toggle'
  }, 5000, 'linear', function() {
      $(this).after('<div>アニメーション完了</div>');
  });
});

2番目のバージョンでは、options引数内にspecialEasingプロパティを含める事が可能になりました。 このプロパティは、マップ値になっており各CSSプロパティに割り当てるイージング関数をそれぞれ指定することができます。

$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

全エフェクトの無効化について

.animate()を含む全エフェクトは、$.fx.off = trueを指定することで無効にすることが可能です。 これは、Durationに0を指定したのと同じ効果があります。 詳しくは、$.fx.off をご覧ください。

デモ

ボタンを押すと、DIV要素がアニメーションします。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color:#bca; width:100px;
  border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go">&raquo; 実行</button>
<div id="block">Hello!</div>
<script>
/* 1回のアニメーション内で複数のプロパティを変化させています。 */
$("#go").click(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});
</script>
</body>
</html>

leftプロパティを現在位置からの相対で指定して、アニメーションします。 連続クリックすると、処理がキューに追加されて実行される事が確認できます。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  position:absolute; background-color:#abc;
  left:50px; width:90px; height:90px; margin:5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>
<script>
$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
});

$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});
</script>
</body>
</html>

最初に幅を90%に引き伸ばし、次にフォントサイズを拡大し、それが終わるとボーダーのアニメーションが始まります。 1つ目のボタンは、最初の幅の引き伸ばし処理をキューに入れないため、連続して実行した後にリセットを押すと、 その処理だけ行われないことが確認できます。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color:#bca; width:200px; height:1.1em;
  text-align:center; border:2px solid green;
  margin:3px; font-size:12px;
}
button {
  font-size:14px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go1">&raquo; ブロック1実行</button>
<button id="go2">&raquo; ブロック2実行</button>
<button id="go3">&raquo; 両方実行</button>
<button id="go4">&raquo; リセット</button>
<div id="block1">ブロック1</div>
<div id="block2">ブロック2</div>
<script>
$( "#go1" ).click(function(){
  $( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
});
$( "#go2" ).click(function(){
  $( "#block2" ).animate({ width: "90%" }, 1000 )
     .animate({ fontSize: "24px" }, 1000 )
     .animate({ borderLeftWidth: "15px" }, 1000 );
});
$( "#go3" ).click(function(){
  $( "#go1" ).add( "#go2" ).click();
});
$( "#go4" ).click(function(){
  $( "div" ).css({ width: "", fontSize: "", borderWidth: "" });
});
</script>
</body>
</html>

1つ目のDIVのみを対象にleftプロパティをアニメーションしていますが、 step関数を使用して他のDIV要素に対して、アニメーションをシンクロさせています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   position: relative;
   background-color: #abc;
   width: 40px; height: 40px;
   float: left; margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button id="go">実行 »</button></p>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<script>
$( "#go" ).click(function(){
  $( ".block:first" ).animate({
    left: 100
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block:gt(0)" ).css( "left", now );
    }
  });
});
</script>
</body>
</html>

 Back to top

© 2010 - 2016 STUDIO KINGDOM