Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

自作のアニメーションを実行するには?(animate)

2015年8月27日

animateメソッドを使って、典型的なアニメーションではなく、カスタムのアニメーションを定義する方法を説明する。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:あらかじめ用意されたアニメーションを実行するには?」では、アニメーションメソッドを利用することで、フェードイン/フェードアウト、スライドアップ/スライドダウンのような典型的なアニメーションを実行する方法について解説しました。しかし、時として、これらのメソッドでは対応できないような細かなアニメーションを再生したいこともあるでしょう。そのような場合には、animateメソッドを利用することで、独自のアニメーションを定義することも可能です。

 例えば以下は、初期状態でページ左上に配置した青丸を、5000ミリ秒かけて250×250pxの位置に四角に変形させながら移動する例です。

HTML
<!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>
リスト1 独自のアニメーションを再生するためのコード(animate.html)
5000ミリ秒かけて右下に移動して●が■に変形する

5000ミリ秒かけて右下に移動して●が■に変形する

画像が形を変えながら移動していく
画像が形を変えながら移動していく

 animateメソッドの一般的な構文は、以下の通りです。

[構文]animateメソッド

animate(props [,dur] [,easing] [,complete])
  • props: アニメーション定義(「スタイルプロパティ: 値」のハッシュ)
  • dur: 再生時間
  • easing: イージング
  • complete: 再生終了後に実行する処理

 これで「durミリ秒後に、対象要素がスタイルpropsの状態になるよう、アニメーションさせよ」という意味になります。その性質上、引数propsで指定できるのは、値として数値を受けとるスタイルプロパティ(例えばheightwidthmarginpaddingopacityなど)だけです*1

  • *1 じつは、先述の別稿で触れたアニメーションメソッドも、animateメソッドのショートカットにすぎません。例えばfadeOutメソッドは指定時間でopacityプロパティを1(不透明)から0(透明)に変化させるものです。

 このサンプルでは、

  • widthheightプロパティを変化させることで拡大
  • marginTopmarginLeftプロパティを変化させることで移動
  • border-radiusプロパティを変化させることで丸→四角

を、それぞれ表現しています。

 数値には250pxのような絶対値だけでなく、+=100px-=100pxのようにすることで、現在の値から100px増加(減少)という相対値を表すこともできます。よって、本稿の例であれば、リスト1の太字部分を以下のように書き換えても同じ意味です。

JavaScript
width: '+=100px',
height: '+=100px',
リスト2 スタイルプロパティの値を相対値で表現

 引数easingcompleteについては、先述の別稿でも触れていますので、本稿では割愛します。

[Note]jQuery UIでより高度なアニメーションを

 jQuery UIを導入することで、カラー値を受け取るスタイルプロパティをanimateメソッドで指定できるようになります。これによって、「徐々に色が変化する」ような用途にもanimateメソッドを利用できるようになり、表現の幅も広がります。

 具体的な例については、別稿「TIPS:jQuery UIで拡張されたエフェクト機能を利用するには?」も併せて参照してください。

処理対象:基本 カテゴリ:アニメーション
API:.animate() カテゴリ:Effects(エフェクト) > Custom

※以下では、本稿の前後を合わせて5回分(第24回~第28回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
24. あらかじめ用意されたアニメーションを実行するには?(show/hide/fadeIn/fadeOut/slideUp/slideDown)

jQueryが提供する基本的なアニメーション機能を活用して、要素を表示/非表示、フェードイン/アウト、スライドアップ/ダウンさせる方法を説明する。

jQuery逆引きリファレンス
25. 実行都度、逆のアニメーションを実行するには?(toggle/fadeToggle/slideToggle)

jQueryが提供する基本的なアニメーション機能を活用して、スライドアップ⇔スライドダウンを交互に実行する方法を説明する。

jQuery逆引きリファレンス
26. 【現在、表示中】≫ 自作のアニメーションを実行するには?(animate)

animateメソッドを使って、典型的なアニメーションではなく、カスタムのアニメーションを定義する方法を説明する。

jQuery逆引きリファレンス
27. アニメーションの細かな挙動を制御するには?(animate/show/hide/fadeIn/fadeOut/slideUp/slideDown)

各種アニメーションメソッドで、アニメーションを直列/並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明。

jQuery逆引きリファレンス
28. 要素にフォーカスが当たった/外れた時の処理を実装するには?(focus、blur、focusin、focusout)

focus/blurもしくはfocusin/focusoutを使って、テキストボックスにフォーカスを当てた時/外した時に処理を実施する方法を説明。またそれらの挙動の違いを解説する。

サイトからのお知らせ

Twitterでつぶやこう!