JQueryのアニメーション実装方法

今回は、cssのスタイルを少しずつ変化させるアニメーションについて紹介します。jQueryにはanimate()メソッドを使い、簡単に実装できます。それでは具体的に説明していきます。

■アニメーションの実装

$(function(){
   $('#typo').on('click', function(){
      $('#typo .inner').animate({
         opacity: 0,
         fontSize: '0px'
       },
       1500
      );
   });
});

サンプルデモ

コードの解説

１・２行目については前回の記事で紹介しているので割愛します。

前回の記事：jQuery実行のタイミングについてはこちら

ここではアニメーションの部分のみ解説します。

■animate()メソッドの実装

$('#typo .inner').animate({
   opacity: 0,
   fontSize: '0px'
   },
   1500
});

上記のコードでは、#typo .innerのcssに対してanimate()メソッドを実行します。

animate()メソッドは処理対象をアニメーションするメソッドです。アニメーションの内容はanimate()メソッドの引数に指定します。

■animate()メソッドの構文

.animate({
   'cssプロパティ': '値',
   'cssプロパティ': '値',
   'cssプロパティ': '値'
   },
   アニメーション時間
});

animate()メソッドの１つめの引数

animate()メソッドの１つめの引数にはアニメーション完了時の見た目を表現するcssプロパティと値を渡します。各cssプロパティと値の書き方は、複数のスタイルを同時に変更するときと同じです。

animate()メソッドが実行されると現在のcssの状態から1つめの引数にしているcssの状態へアニメションされます。つまり、今回のアニメーションは以下のことが実行されます。

• 要素の不透明度が徐々に透明になる
• 要素の文字サイズが徐々に０pxになる

animate()メソッドの2つめの引数

2つめの引数はどのぐらい時間をかけてアニメーションさせるかということを示しています。時間の単位はミリ秒です。2000と指定すると2秒かけてアニメーションするということになります。

■2つめの引数

      $('#typo, .inner').animate({
         opacity: 0,
         fontSize: '0px'
      },
      1500
});

その他主な引数について

animate()メソッドの引数は、cssのオブジェクトやアニメーション時間以外にもさまざな値を指定できます。今回は頻繁に利用する主な引数を2つご紹介します。その2つは、イージングの種類をアニメーション終了時に実行する処理です。

■animate()メソッドの引数にイージングの種類とアニメーション終了時に実行する処理

.animate({
      アニメーション用css
   },
   アニメーション時間,
   'イージングの種類';
   function(){
      アニメーション終了時に実行する処理
   }
});

これらの指定は任意であり、いずれか一方のみ記述でも省略することも可能です。

イージングの種類

animate()メソッドでは、3つめの引数としてイージングの種類を指定できます。イージングとはアニメーションの変化の度合いです。jQueryにはlinear（等速）とswing（軽い緩急）の2種類があります。コードを省略した場合はswingが適用されます。

■イージングの例

$(function(){
   $('#typo .inner')
      .css('top', '-200px')
      .on('click', function(){
         $('#typo .inner').animate({
            top: '100px'
         },
         1500,
         'linear'
      );
   });
});

サンプルデモ

上記のコードは対応のjQueryオブジェクト（#typo .inner）に対して以下の処理を実行しています。

• 読み込み時は.css(‘top’, ‘-200px’)を実行して文字列の位置を変更している
• 要素をクリックするとanimate()メソッドが実行される
• animate()メソッドで文字列をtop:’100px’の位置に徐々に移動させている

今回はlinearを指定しましたが、swingを指定するとふわっと移動するように変更されます。

アニメーション終了時に実行する処理

animate()メソッドでは、アニメーション終了時に実行する処理を指定することも可能です。この場合はメソッドの引数にfunction(){}を指定します。下記はそのサンプルコードです。

■アニメーション終了時に実行する処理

$(function(){
   $('#typo .inner')
      .css('top', '-100px')
      .on('click', function(){
         $('#typo .inner').animate({
            top: '100px'
         },
         1500,
         function(){
            $('#typo .inner').animate({top: '0px'}, 500);
         }
       );
   });
});

上記のコードを記述すると、アニメーション終了時に$(‘#typo .inner’).animate({top:’0px’},500);の処理が実行されます。つまり、アニメーション全体の動きはtop→100px→0pxの位置に移動するアニメーションになります。

animate()メソッドの注意点

animate()メソッドでは、アニメーション中の同じ要素に対して、別のanimate()メソッドを実行しても、途中段階のアニメーションはキャンセルされず、順番待ちをする仕様になっえています。

■animate()メソッドの仕様について

$(function(){
   $('#typo')
      .on('mouseover', function(){
         $('#typo').animate({
               backgroundColor: 'ae5e9b'
            },
            500
         );
      })
      .on('mouseout', function(){
         $('#typo').animate({
               backgroundColor: '#34989db'
            },
            500
         );
   });
});

上記コードについて一見正しいように思えますが、マウスオーバーとマウスアウトをすばやく繰り返した場合、思った通りの動作にならないです。例えば、マウスオーバーのアニメーションが途中であっても、その動作をキャンセルしてマウスアウトのアニメーションは実行されません。

実行中のアニメーションを途中でキャンセルする方法

アニメーションを途中でキャンセルするにはstop()メソッドを追加します。stop()メソッドは要素のアニメーションを停止するメソッドです。引数にtrueもしくはfalseを指定します。デフォルトはfalseです。

■stop()メソッドのコード

stop(true | false)

それでは先ほどのコードにstop()メソッドを追加してみます。

■animate()メソッドを追加

$(function(){
   $('#typo')
      .on(mouseover, function(){
         $('#typo').stop(true).animate({
               backgroundColor: '#ae5e9b'
            },
            500
         );
      })
      .on('mouseout', function(){
         $('mouseout').stop(true).animate({
               backgroundColor: '#3498db'
            },
            500
          );
    });
});

上記のコードで正常な動作になります。注意点としては、stop()メソッドはanimate()メソッドよりも前に記述する必要があります。

関連記事はこちら

jQueryの関数

jQuery実行のタイミングについて

jQuery 画像とキャプションの表現

jQueryの演算子

jQueryの基礎を体験しよう

jQueryの制御文

jQueryはじめてみる

jQuery データを格納する