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:加速0
$(要素).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");

jQuery

次の記事

jQuery DOM操作