jQuery の animate の速度(動作時間)を指定する方法

jQuery の animate の速度(動作時間)は、slow、normal、fast、ミリ秒単位の時間などで指定できる。

animate の速度の指定方法

animate の速度(動作時間)の指定方法は、2種類ある。

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

animate( properties, [duration], [easing], [complete] ) メソッドの場合、animate の2つ目の引数で直接指定。
[ duration ] に入るのは、ミリ秒単位の数字、もしくは、'slow'、'normal'、'fast'、の文字列。

animate( { width: 'toggle',}, 'slow' )

animate( properties, options )

animate( properties, options ) メソッドの場合、animate の2つ目の引数である options 内の duration: 速度 で指定。
速度に入るのは、ミリ秒単位の数字、もしくは、'slow'、'normal'、'fast'、の文字列。

animate( { width: 'toggle',}, { duration: 'slow' } )

animate の速度を指定した例

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

slow

animate( { width: 'toggle',}, { duration: 'slow', easing: 'swing', } )

normal

animate( { width: 'toggle',}, { duration: 'normal', easing: 'swing', } )

fast

animate( { width: 'toggle',}, { duration: 'fast', easing: 'swing', } )

2000

2秒間(2000ミリ秒間)

animate( { width: 'toggle',}, { duration: 2000, easing: 'swing', } )

5000

5秒間(5000ミリ秒間)

animate( { width: 'toggle',}, { duration: 5000, easing: 'swing', } )

スポンサード リンク

カテゴリー: animate, API, JavaScript, jQuery, アニメーション, エフェクト, カスタム パーマリンク