jQuery の animate の動作パターンを指定する方法

jQuery の animate の動作は、easing に linear と swing などの動作パターンを指定するこで変更することができる。
jQuery にデフォルトで用意されているのは、linear と swing のシンプルな動作パターンだけだが、jQuery Easing Plugin などの jQuery プラグインを導入することで、使える動作パターンを増やすことができる。

animate の動作パターンの指定方法

animate の動作パターンの指定方法は、2種類ある。

animate( properties, [ duration ], [ easing ], [ complete ] )

animate( properties, [duration], [easing], [complete] ) メソッドの場合、3つ目の引数で直接指定。
[ easing ] に入るのは、'linear' か、'swing' の文字列。

例

animate( properties, options )

animate( properties, options ) メソッドの場合、animate の2つ目の引数である options 内の easing: 動作パターン で指定。
動作パターンに入るのは、'linear' か、'swing' の文字列。

例

animate の動作パターンを指定した例

赤いブロック部分を、クリックすると、グレーのブロック部分が、左に動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、右に動きながら出現。動き方( easing )は、それぞれ異なる。

linear

swing