jQueryにのanimateを使って基本的なアニメーションをする方法

jQueryのanimateを使うとアニメーションを実装することができます。

今回はanimateを使って基本的なアニメーションを作る方法を紹介します。

 

HTMLとCSS

アニメーションをするオブジェクトをHTMLとCSSで作っておきます。今回は100pxの高さと幅を持つ正方形をアニメーションさせてみましょう。

HTML

<div id="box"></div>

 

CSS

#box {
    width: 100px;
    height: 100px;
    background: #3399FF;
}

次にjQuery本体を読み込んでしまいます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

 

animateを使った基本的なアニメーション

animateメソッドは以下のように使います。

$('要素名').animate({
  プロパティ: 'アニメーション終了時の数値'
});

 

例えば、以下の例はページが読み込まれた際に右に500px移動させるアニメーションです。

なお、タイミングを指定しない場合はページが読み込まれてすぐにアニメーションが始まります。

$('#box').animate({
  marginLeft: '500px'
});

 

ちなみにCSSでは「margin-left」のようにハイフンを入れて記述しますが、jQueryではハイフンを無くす代わりに次の単語の先頭を大文字にしてキャメルケースという書き方が定番です。(もちろんハイフンを使用する書き方でもちゃんと動きます)

他に例を挙げると、fontSizeやbackgroundColorなどですね。

キャメルケース記法の場合はCSSプロパティにはシングルクォーテーションはつけません。

 

初期位置は親要素が基準

複数の要素をアニメーションしたいときはpositionを設定しないと不便な場合があります。

そこで、positionを指定して複数の要素を同じ基準で動かす方法を紹介します。

まず、動かしたい複数の要素をタグで囲みましょう。

div id="wrap">
  <div id="box1"></div>
  <div id="box2"></div>
</div>

 

次に親要素にposition: relative;、子要素にposition: absolute;を指定します。

#wrap {
    position: relative;
}
#box2,
#box1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #5EA9F4;
}

 

こうすることで「#wrap」を基準に要素をアニメーションすることができるようになります。

$('#box1').animate({
    'left': '500px'
});
$('#box2').animate({
    'left': '300px',
    'top': '200px'
});

 

斜めにアニメーションする

斜め下に移動させる場合には簡単な話で、「left」と「top」を同時にアニメーションさせればいいだけです。

プロパティを複数指定する場合はプロパティごとに「,」で繋げば大丈夫です。

$('#box1').animate({
    'left': '500px',
    'top': '300px'
});

 

連続でアニメーションする

右に行ってから下に移動するように、連続でアニメーションしたい場合はanimateを繋げて書きます。

このようにメソッドを繋げて各記法をメソッドチェーンと言います。チェーンみたいに見えるからという単純な理由ですね。

$('#box1')
    .animate({'left':'500px'})
    .animate({'top':'500px'})
    .animate({'left':'0px'})
    .animate({'top':'0px'});

 

このように記述すると上から順にanimarteが実行されていくので、連続でアニメーションしているように見えます。

 

イージングを指定する

イージングとは動き方の緩急に関する指定です。

デフォルトでは「linear」と「swing」の2種類しか指定できませんが、「jQuery Easing Plugin」というプラグインを読み込むと指定できるイージングの種類がかなり増えます。

$('#box1').animate({
    'left': '500px'
}, 600, 'linear'
);

 

{}の外側にduration(アニメーションにかける時間)とイージングを順に指定します。durationはミリ秒単位で指定します(1秒=1000ミリ秒)

今回なら0.6秒かけて「linear」のイージングでアニメーションするという感じです。

 

事後処理

メインのアニメーションが終わった後にさらに処理を追加したい場合は、{}の外側にfunctionを追加します。

$('#box1').animate({
    'left': '500px'
}, 600, 'linear', function(){
  alert('これは事後処理です');
  }
);

 

まとめ

以上が基本的なanimateの使い方になります。

animateは使えるようになると応用がかなり効くので、ぜひ使い方をマスターしておきましょう。

ずっと使っていればそのうち慣れます。頑張りましょう。