jQuery逆引きリファレンス
自作のアニメーションを実行するには？（animate）
animateメソッドを使って、典型的なアニメーションではなく、カスタムのアニメーションを定義する方法を説明する。
別稿「TIPS：あらかじめ用意されたアニメーションを実行するには？」では、アニメーションメソッドを利用することで、フェードイン／フェードアウト、スライドアップ／スライドダウンのような典型的なアニメーションを実行する方法について解説しました。しかし、時として、これらのメソッドでは対応できないような細かなアニメーションを再生したいこともあるでしょう。そのような場合には、animateメソッドを利用することで、独自のアニメーションを定義することも可能です。
例えば以下は、初期状態でページ左上に配置した青丸を、5000ミリ秒かけて250×250pxの位置に四角に変形させながら移動する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style>
#cube {
background-color: blue;
width: 100px;
height: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<div id="cube"></div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// ロード時に<div id="cube">要素のアニメーションを開始
$('#cube').animate({
width: '200px',
height: '200px',
marginTop: '250px',
marginLeft: '250px',
borderRadius: '0px'
}, 5000);
});
</script>
</body>
</html>
|
5000ミリ秒かけて右下に移動して●が■に変形する
animateメソッドの一般的な構文は、以下の通りです。
［構文］animateメソッド
- props： アニメーション定義（「スタイルプロパティ: 値」のハッシュ）
- dur： 再生時間
- easing： イージング
- complete： 再生終了後に実行する処理
これで「durミリ秒後に、対象要素がスタイルpropsの状態になるよう、アニメーションさせよ」という意味になります。その性質上、引数propsで指定できるのは、値として数値を受けとるスタイルプロパティ（例えばheight、width、margin、padding、opacityなど）だけです*1。
- *1 じつは、先述の別稿で触れたアニメーションメソッドも、animateメソッドのショートカットにすぎません。例えば
fadeOutメソッドは指定時間でopacityプロパティを1（不透明）から0（透明）に変化させるものです。
このサンプルでは、
width／heightプロパティを変化させることで拡大marginTop／marginLeftプロパティを変化させることで移動border-radiusプロパティを変化させることで丸→四角
を、それぞれ表現しています。
数値には250pxのような絶対値だけでなく、+=100px／-=100pxのようにすることで、現在の値から100px増加（減少）という相対値を表すこともできます。よって、本稿の例であれば、リスト1の太字部分を以下のように書き換えても同じ意味です。
|
width: '+=100px',
height: '+=100px',
|
引数easing／completeについては、先述の別稿でも触れていますので、本稿では割愛します。
［Note］jQuery UIでより高度なアニメーションを
jQuery UIを導入することで、カラー値を受け取るスタイルプロパティをanimateメソッドで指定できるようになります。これによって、「徐々に色が変化する」ような用途にもanimateメソッドを利用できるようになり、表現の幅も広がります。
具体的な例については、別稿「TIPS：jQuery UIで拡張されたエフェクト機能を利用するには？」も併せて参照してください。
API：.animate() カテゴリ：Effects（エフェクト） > Custom
※以下では、本稿の前後を合わせて5回分（第24回～第28回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
24. あらかじめ用意されたアニメーションを実行するには？（show／hide／fadeIn／fadeOut／slideUp／slideDown）
jQueryが提供する基本的なアニメーション機能を活用して、要素を表示／非表示、フェードイン／アウト、スライドアップ／ダウンさせる方法を説明する。
25. 実行都度、逆のアニメーションを実行するには？（toggle／fadeToggle／slideToggle）
jQueryが提供する基本的なアニメーション機能を活用して、スライドアップ⇔スライドダウンを交互に実行する方法を説明する。
26. 【現在、表示中】≫ 自作のアニメーションを実行するには？（animate）
animateメソッドを使って、典型的なアニメーションではなく、カスタムのアニメーションを定義する方法を説明する。
27. アニメーションの細かな挙動を制御するには？（animate／show／hide／fadeIn／fadeOut／slideUp／slideDown）
各種アニメーションメソッドで、アニメーションを直列／並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明。
28. 要素にフォーカスが当たった／外れた時の処理を実装するには？（focus、blur、focusin、focusout）
focus／blurもしくはfocusin／focusoutを使って、テキストボックスにフォーカスを当てた時／外した時に処理を実施する方法を説明。またそれらの挙動の違いを解説する。
