独自のアニメーションを指定する animate()

animate()命令は、任意のCSSプロパティの
値を徐々に変更して、独自のアニメーションを作成できる命令です。

括弧内にはCSSプロパティ、アニメーションのスピード、
動き(easing)、コールバック関数を指定します。

$( セレクター ).animate( 値を変更したいCSSプロパティ,
スピード,動き,コールバック関数 )

animate()に設定できるプロパティは、width,opacityのように
数値(px,em,%)で表現できるものに限ります。
colorのように数値以外の物で指定するプロパティには、
この命令は動きません。

書き方はCSS()で複数のCSSプロパティを同時に設定する場合と
同じで、プロパティ名と値を「：」コロンで繋ぎ
「"」ダブルクォーテーションで囲みます。複数のプロパティは
グループセレクターのように「,」カンマで繋げます。

動きには「linear」/「swing」を設定できます。
linearは常に一定の速度で、swingははじめはゆっくり
後からはやい速度で変化をつけながら値を変更します。

実行結果はこちらです。画像をクリックすると、画像がスライドします。