animate()の使い方〜jQuery | IT工房

animateの指定は２つの方法があります。
まず、一つ目の方法は入門書などで紹介されている記述方法で以下のものです。

animate(params, [duration], [easing], [callback])

html

<button>click</button>
<div></div>

css

div{
  width:100px;
  height:50px;
  background-color:blue;
}

jQuery

$(function(){
  $('button').click(function(){
    $('div').animate({width:'400px'},'slow','swing',function(){
	alert('END')
    })
  })
})

もう一つの記述方法は第２引数をオブジェクト（連想配列）の形式で記述する方法です。こちらの記述の方が詳細に設定ができますので覚えておくと良いでしょう。工夫次第で面白い動きをつけることができます。
尚、オプションの記述は以下の通りです。

animate(params, options)

指定できるオプションは、以下の通りです。

duration (default: 400)

Type: 数字かキーワード
アニメーションする時間を決定する文字列または数値

easing (default: swing)

Type: キーワード
イージングの指定

queue (default: true)

Type: ブーリアンかキーワード
エフェクトキューにアニメーションを配置するかどうかを示すブール値。 falseの場合、アニメーションはすぐに開始されます。 jQuery 1.7以降、queueオプションは文字列を受け入れることもできます。この場合、アニメーションはその文字列で表されるキューに追加されます。カスタムキュー名を使用すると、アニメーションは自動的に開始されません。 .dequeue（ “queuename”）を呼び出して起動する必要があります。

specialEasing

Type: PlainObject
プロパティ引数で定義された1つ以上のCSSプロパティと、対応するイージング関数を含むオブジェクト

step

Type: Function( Number now, Tween tween )
アニメーション化された各要素の各アニメーション化されたプロパティに対して呼び出される関数。この関数は、プロパティが設定される前にプロパティの値を変更するようにTweenオブジェクトを変更する機会を提供します。

progress

Type: Function( Promise animation, Number progress, Number remainingMs )
アニメーションの各ステップ後に呼び出される関数。アニメーション化されたプロパティの数に関係なく、アニメーション化された要素ごとに1回だけです。（バージョン追加：1.8）

complete

Type: Function()
要素のアニメーションが完了した後に呼び出される関数

start

Type: Function( Promise animation )
要素のアニメーションが開始されたときに呼び出す関数です。（バージョン追加：1.8）

done

Type: Function( Promise animation, Boolean jumpedToEnd )
要素のアニメーションが完了したとき（そのPromiseオブジェクトが解決されたとき）に呼び出される関数。（バージョン追加：1.8）

fail

Type: Function( Promise animation, Boolean jumpedToEnd )
要素上のアニメーションが完了しなかったとき（Promiseオブジェクトが拒否されたとき）に呼び出される関数。 (version added: 1.8)

always

Type: Function( Promise animation, Boolean jumpedToEnd )

要素上のアニメーションが完了せずに完了するか、停止したときに呼び出される関数です（Promiseオブジェクトは解決済みか拒否されています）。（バージョン追加：1.8）

sample２
オプションを使用した書き方でsample1と同様の動きを設定しています。

jQuery

$(function(){
　　$('button').click(function(){
　　　　$('div').animate({width:'400px'},{
　　　　　　　duration:'slow',
　　　　　　　easing:'swing',
　　　　　　　complete:function(){
	alert('END');
　　　　　　　}
　　　　})
})

sample3
このサンプルはstepを使用して「*」を書き出しています。

$(function(){
  $('button').click(function(){
    $('div').animate({width:'400px'},{
	duration:'slow',
	easing:'swing',
	step:function(now){
	  $('p').append('*');
	},
	complete:function(){
	  alert('END');
	}
    })
  })
})

sampl4
このサンプルもstepを使用してanimateではアニメーションできないrotateを使って回転を実現しています。

$(function(){
  $('button').click(function(){
    $('div').animate({width:'400px'},{
	duration:'slow',
	easing:'swing',
	step:function(now){
	  $(this).css({'transform': 'rotate(' + now * 405 + 'deg)'});
	},
	complete:function(){
	  alert('END');
	}
    })
  })
})