jQuery エフェクト・アニメーション

設定値

ミリ秒の他に、"slow","normal","fast"を設定可能。

hide()

対象を非表示に
$(対象).hide();

show()

対象を表示させる
$(対象).show();

toggle()

対象が非表示の時は表示、表示されている時は非表示に
$(対象).toggle(s);

fadeOut()

段々薄く非表示に
$(対象).fadeOut(s);

fadeIn()

段々濃く表示させる
$(対象).fadeIn(s);

slideUp()

対象の下部がUpする様に非表示に
$(対象).slideUp(s);

slideDown()

対象の上部がDownする様に表示させる
$(対象).slideDown(s);

animate()

指定のアニメーションを実行させる
$(対象).animate( properties, [ duration ] , [ easing ] , [ complete ] )
$(対象).animate( properties, options )
の2種類の構文がある。
アニメーション無しで移動
$(要素).animate({ top: "0px", left: "0px" });

アニメーションの長さ(ミリ秒)
$(要素).animate({ top: "0px", left: "0px" } , 1000);
※1秒かけて移動(遅い)
$(要素).animate({ top: "0px", left: "0px" } , 10);
※0.01秒で移動(速い)
$(要素).animate({ top: "0px", left: "0px" } , 'slow');
$(要素).animate({ top: "0px", left: "0px" } , 'fast');
※ $(要素).animate( { top: "0px",}, { duration: 'slow'} )

加速(イージング)
swing：徐々に加速⇒減速して停止(デフォルト)
linear：加速０
$(要素).animate({ top: "0px", left: "0px" }, 'slow', "swing");
$(要素).animate({ top: "0px", left: "0px" }, 'slow', "linear");
※ $(要素).animate( { top: "0px",}, { duration: 'slow', easing: 'swing', } )

コールバック関数
$(要素).animate({ top: "0px", left: "0px" }, 1000, "linear", myFunc);
$(要素).animate({ top: "0px", left: "0px" }, 1000, "linear", function(){ ～ });
$(要素).animate({ top: "0px", left: "0px" }, 1000, "linear", myFunc1, myFunc2 );
※ $(要素).animate( { top: "0px",}, { duration: 'slow', easing: 'swing', step : myFunc1, complete: myFunc2 } )

メソッドチェーン
$(要素)
　　.animate({ top: "0px", left: "0px" } , 1000)
　　.animate({ top: "100px", left: "100px" } , 1000)
　　.animate({ top: "0px", left: "0px" } , 1000)
　　.animate({ top: "100px", left: "100px" } , 1000);

キュー
※即時実行
queue: false(デフォルト：true)
$(要素)
　　.animate({ top: "0px", left: "0px", queue: false } , 1000)
　　.animate({ top: "100px", left: "100px", queue: false } , 1000)

アニメーションの停止
$(要素).stop();

スクロール(animate)

<script type="text/javascript">
　　$(function () {
　　　　//クラス：aのtopからの絶対位置を取得
　　　　var iniPlace = $(".a").offset().top;
　　　　
　　　　//↑位置へスクロール
　　　　$("html,body").animate({ scrollTop: iniPlace }, "fast");
　　})
</script>
<div>
　　<p class="a">A</p>
　　<p class="b">B</p>　　←ここへスクロールされる
　　<p class="c">C</p>
<div>

※画面最上部へスクロール
$("html,body").animate({ scrollTop: 0 }, "fast");