jQuery

【jQuery】animateでアニメーション要素を作る方法

jQueryといえば、Webページに動きをつけることです。
animeteメソッドを使うと、動きをつけたい要素に対して簡単にアニメーションをつけることができます。

動きのつけかたの基礎からちょっとした活用までまとめておきます。

animateの基本的な書式

animateの基本的な書式は以下の通り$(“セレクタ”).animate({
 ”プロパティ”:”値”,
 ”プロパティ”:”値”,
});

プロパティはキャメルケースで書く

キャメルケースとは CSSだと、「margin-left」のようにハイフンを入れて書きますが、キャメルケースは「marginLeft」のように大文字で区切って書きます。
javascript、jQueryで使われているようです。

See the Pen
gNbLWN
by kei (@kei_01011)
on CodePen.

divで作成した赤丸をanimateメソッドで右に動かしてみました。
これが基本的な書き方です。

  $(function(){
 $("#circle").animate({ "marginLeft":"700px",
 //アニメーションの処理
 },1000);
 //アニメーションの速さ 
});

アニメーションの処理を記述した後に、
必要であれば、アニメーションの速さも指定することができます。

ミリ秒で指定するので、1000であれば1秒のこと。
つまり、「1秒で左に700pxのマージンをとる」というアニメーションができるということです。

durationとeasing

See the Pen
xobrQx
by kei (@kei_01011)
on CodePen.

 

$(function(){
 $("#circle").animate({
 "marginLeft":"700px",
 "marginTop" :"150px",
 "borderRadius" : "0",
 }, { duration:1000, 
//アニメーションの速さ
  easing:"swing" //動きにエフェクトをかける
  });
 });

アニメーションの速さは、durationの記述がなくてもできます。
きっちり書けばこうやって書くんだなという事も知っておいたほうがいいと思いました。

easingとは、jQueryでanimateメソッドを使ってアニメーション動作をつけますが、それだけだと単調な動きになってしまいます。

そこで、easing(イージング)処理をつける事で、動きに強弱を出すことができます。

また、jQueryのイージングは「linear」と「swing」の2つが使え、さらに多様なイージング処理をかけたい場合は、プラグインを使う必要があるようです。

以下のサイトで、easingのサンプルとプラグインについて解説されています。

jQuery日本語リファレンス  

【jQuery入門】easingの使い方とPluginの活用方法まとめ!

jQueryアニメーションにイージング(easing)処理をつけるプラグイン【イージング動作サンプル一覧】