本サイトからスピンオフした姉妹サイトです。jQuery2015年8月27日animateメソッドを使って、典型的なアニメーションではなく、カスタムのアニメーションを定義する方法を説明する。別稿「TIPS:あらかじめ用意されたアニメーションを実行するには?」では、アニメーションメソッドを利用することで、フェードイン/フェードアウト、スライドアップ/スライドダウンのような典型的なアニメーションを実行する方法について解説しました。時として、これらのメソッドでは対応できないような細かなアニメーションを再生したいこともあるでしょう。そのような場合には、animateメソッドを利用することで、独自のアニメーションを定義することも可能です。以下は、初期状態でページ左上に配置した青丸を、5000ミリ秒かけて250×250pxの位置に四角に変形させながら移動する例です。画像が形を変えながら移動していくanimateメソッドの一般的な構文は、以下の通りです。再生終了後に実行する処理これで「durミリ秒後に、対象要素がスタイルpropsの状態になるよう、アニメーションさせよ」という意味になります。その性質上、引数propsで指定できるのは、値として数値を受けとるスタイルプロパティ(例えばheight、width、margin、padding、opacityなど)だけです*1。じつは、先述の別稿で触れたアニメーションメソッドも、animateメソッドのショートカットにすぎません。fadeOutメソッドは指定時間でopacityプロパティを1(不透明)から0(透明)に変化させるものです。このサンプルでは、width/heightプロパティを変化させることで拡大marginTop/marginLeftプロパティを変化させることで移動border-radiusプロパティを変化させることで丸→四角を、それぞれ表現しています。数値には250pxのような絶対値だけでなく、+=100px/-=100pxのようにすることで、現在の値から100px増加(減少)という相対値を表すこともできます。よって、本稿の例であれば、リスト1の太字部分を以下のように書き換えても同じ意味です。引数easing/completeについては、先述の別稿でも触れていますので、本稿では割愛します。UIを導入することで、カラー値を受け取るスタイルプロパティをanimateメソッドで指定できるようになります。これによって、「徐々に色が変化する」ような用途にもanimateメソッドを利用できるようになり、表現の幅も広がります。UIで拡張されたエフェクト機能を利用するには?」も併せて参照してください。※以下では、本稿の前後を合わせて5回分(第24回~第28回)のみ表示しています。INDEX]を参照してください。用意されたアニメーションを実行するには?(show/hide/fadeIn/fadeOut/slideUp/slideDown)jQueryが提供する基本的なアニメーション機能を活用して、要素を表示/非表示、フェードイン/アウト、スライドアップ/ダウンさせる方法を説明する。実行都度、逆のアニメーションを実行するには?(toggle/fadeToggle/slideToggle)jQueryが提供する基本的なアニメーション機能を活用して、スライドアップ⇔スライドダウンを交互に実行する方法を説明する。自作のアニメーションを実行するには?(animate)animateメソッドを使って、典型的なアニメーションではなく、カスタムのアニメーションを定義する方法を説明する。アニメーションの細かな挙動を制御するには?(animate/show/hide/fadeIn/fadeOut/slideUp/slideDown)各種アニメーションメソッドで、アニメーションを直列/並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明。要素にフォーカスが当たった/外れた時の処理を実装するには?(focus、blur、focusin、focusout)focus/blurもしくはfocusin/focusoutを使って、テキストボックスにフォーカスを当てた時/外した時に処理を実施する方法を説明。それらの挙動の違いを解説する。機械学習エンジニアを目指す人~初中級者のための技術情報サイトです。「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。開発者のためのSlackチーム、作りました:「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。2020最適なビューへの切り替えを推奨します:スマートフォン用表示に。