[jQuery]animateで気づいたことメモ

jQueryの特徴的な関数 animate
特にギャラリー系のプラグインを作る時お世話になっています。(こんなの とか こんなの)

animateってなんなの？という方はこちらをお試しください。

Hello World!

<div id="animateDemo" style="border:1px solid #ccc;width: 30%;height: 60px;">
  Hello World!
</div>

<input type="button" value="animate" id="demoButton" />

<script type="text/javascript">
  $('#demoButton').click(function (event) {
    $('#animateDemo')
      .append('<span id="demoStatus">拡大中...</span>')
      .animate(
        {width: '80%', height: '150px', borderWidth: '10px'},
        1500, 
        function () {
          $('#demoStatus').text('縮小中...');
        })
      .animate({width: '30%', height: '60px',  borderWidth: '1px'}, {
        duration: 1500,
        complete: function () {
          $('#demoStatus').remove();
        }
      });
  });
</script>

非常に有用な関数ではあるのですが、使っている時に気づいたことがいくつかあるのでメモしておきます。


1. animateの引数の違い

ドキュメントを見てもらうと分かるのですが、animateには引数のとりかたが2種類あります。

a. animate( params, [duration], [easing], [callback] )
b. animate( params, options )

はじめはそれぞれ別モノなのかな？と思っていましたが、引数のとりかたが違うだけで同じことをやっているようです。

a. は引数が固定で、 [duration], [easing], [callback]と３つの引数をとることができます。

b.の形式だとこのように書けます。a.の形式では指定できないオプションも指定することが可能です。

$('#foo').animate({width: '50%'}, {
  duration: 1500,
  easing: 'linear',
  complete: function () {...},
  step: function () {...},
  queue: false
});

complete:
アニメーションが完了した時のコールバック関数

step:
アニメーションのステップごとに呼ばれるコールバック関数

queue:
複数のアニメーションを実行する場合に、即座に実行するか順番に実行するか
trueなら順番に falseならそれぞれ即座に実行される。
(デフォルトはtrue)



2. easingとは？

easingという耳慣れない単語のせいもあって、最初はなんだかよく分からず完全に無視していましたが、これはけっこう面白い。

これは要するに、アニメーションの実行のされ方らしいです。
「最初はゆっくりで徐々に早く」とか「弾けるように」などなど。

ただ、デフォルトでは "linear" と"swing" しか指定することができないのでほとんど意味がないと思われます。

様々なeasingをまとめた jQuery Easing Plugin があるので、気になる方はそちらをどうぞ。



3. 色のアニメーションができない

意外というかなんというか、jQuery単体では色のアニメーションを行うことができません。
「最初は背景が黒で徐々に白く」というのが無理です。

ただ、この点もプラグインが用意されています (Color Animations)。
作者はjQuery本体の作者でもあります。(John Resig氏)

詳しいことは分かりませんが、あえて色のアニメーションをjQuery本体には組み込んでいないのかもしれません。

$('#foo').animate({
  color: '#ffffff',
  backgroundColor: '#000000'
}, 1500);