JQueryのアニメーション実装方法
今回は、cssのスタイルを少しずつ変化させるアニメーションについて紹介します。jQueryにはanimate()メソッドを使い、簡単に実装できます。それでは具体的に説明していきます。
■アニメーションの実装
$(function(){
$('#typo').on('click', function(){
$('#typo .inner').animate({
opacity: 0,
fontSize: '0px'
},
1500
);
});
});
目次
コードの解説
１・２行目については前回の記事で紹介しているので割愛します。
ここではアニメーションの部分のみ解説します。
■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が適用されます。
| 種類 | 説明 |
|---|---|
| liner | 等速。緩急がなく、一定のスピードでアニメーションする |
| 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()メソッドよりも前に記述する必要があります。
