jQuery--animate()メソッド

≪インスタンス｜Instance｜emdw≫

div要素の高さを変更するには、次の手順に従います.

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

みずからやってみる

定義と使用法

animate()メソッドは、CSSプロパティセットのカスタムアニメーションを実行します.
この方法はCSSスタイルによって要素をある状態から別の状態に変更する.CSSアトリビュート値は徐々に変化し、アニメーション効果を作成できます.
アニメーションを作成できるのは数値値のみです(margin:30 pxなど).文字列値はアニメーションを作成できません(background-color:redなど).
注記:「+=」または「-=」を使用して相対アニメーション(relative animations)を作成します.

構文1

$(selector).animate(styles,speed,easing,callback)

パラメータ
説明
styles
必要です.アニメーション効果を生成するCSSスタイルと値を指定します.使用可能なCSSスタイルの値(インスタンスを指定):
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
注記:CSSスタイルでは、CSS名(font-sizeなど)ではなくDOM名(fontSizeなど)を使用して設定します.
speed
オプション.アニメーションの速度を指定します.デフォルトは「normal」です.可能な値:
ミリ秒(例えば1500)"slow"
"normal"
"fast"
easing
オプション.異なるアニメーションポイントでアニメーション速度を設定するeasing関数を指定します.内蔵easing関数:
swing
linear
拡張プラグインにはeasing関数が追加されます.
callback
オプション.animate関数の実行が完了したら、実行する関数.callbackの詳細については、jQuery Callbackの章を参照してください.

構文2

$(selector).animate(styles,options)

パラメータ
説明
styles
必要です.アニメーション効果を生成するCSSのスタイルと値(同上)を指定します.
options
オプション.アニメーションの追加オプションを指定します.可能な値:
speed-アニメーションの速度を設定するeasing-使用するeasing関数を規定する
callback-アニメーション完了後に実行する関数を指定します.
Step-アニメーションの各ステップが完了した後に実行する関数を規定する
Queue-ブール値.効果キューにアニメーションを配置するかどうかを示します.falseの場合、アニメーションはすぐにを開始します.
specialEasing-stylesパラメータからの1つまたは複数のCSS属性のマッピング、およびそれらの対応するeasing関数