アニメーション[animate][移動][jQuery]

2017年8月4日

animateメソッドを利用した基本的なアニメーションを説明をいたします。animateメソッドは対象とする要素のCSSプロパティを変化させることによって、アニメーションを表現します。

 

スポンサーリンク

 

 

下記のデモ画面で、ボタンをクリックすると四角形のオブジェクトが移動するアニメーションが見られます。アニメーションが完了した時点で、四角形の色が赤に変わります。

 

デモ画面

 

 

 

animateメソッド


 

animateメソッドの基本的な構文は下記のようになります。

 

{properties}

CSSのプロパティを指定すると、そのプロパティ値が適用されるまでアニメーションが行われます。widthやmarginなどの数値を扱うプロパティのみ指定できます。

 

margin-leftのようにハイフンを含むCSSにおいて ‘(クオテーション)で囲まない場合は、marginLeftのようにキャメルケースで記述をします。

 

また下記のように「+=」のように相対値を指定することもできます。

 

duration

アニメーションが完了するまでの時間(ミリ秒)を指定します。上記例のコードでは「1000」に指定しているので、1秒(1000ミリ秒)で動作が完了するように設定されます。時間を指定しない場合(つまりデフォルト)は、400に設定されています。

 

ミリ秒以外では「normal」「slow」「fast」 といった文字列でも指定できます。それぞれ「400ミリ秒」「600ミリ秒」「200ミリ秒」となっています。

 

easing

イージングの形式(アニメーションの形式)を指定できます。jQueryではswingとlinearが選択でき、デフォルトではswingに設定されています。 swingは徐々に加速しつつまた減速し止まる挙動で、linearは等速運動です。

 

callback

コールバック関数です。アニメーションが完了した時点で、実行させる関数を指定します。関数内の$(this)は自身のオブジェクトで今回は$(‘#button’)を指します。

 

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー