jQuery制御要素の表示、非表示、切り替え、スライドの方法

jQueryの非表示と表示
hide()とshow()の2つの関数により、jQueryはHTML要素の非表示と表示をサポートします.
≪インスタンス｜Instance｜emdw≫

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

hide()とshow()の両方で、speedとcallbackの2つのオプションパラメータを設定できます.
構文:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

speedパラメータは、表示または非表示の速度を規定します.これらの値は、「slow」、「fast」、「normal」またはミリ秒で設定できます.
callbackパラメータはhideまたはshow関数が完了した後に実行される関数名です.このチュートリアルの次の章でcallbackパラメータについて詳しく説明します.
≪インスタンス｜Instance｜emdw≫

$("button").click(function(){
$("p").hide(1000);
});

callbackパラメータは、この関数が完了した後に実行される関数名です.このチュートリアルの次の章でcallbackパラメータについて詳しく説明します.
jQueryスライド関数-slideDown,slideUp,slideToggle
jQueryには、次のスライド関数があります.

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

speedパラメータは、「slow」、「fast」、「normal」またはミリ秒の値を設定できます.
callbackパラメータは、この関数が完了した後に実行される関数名です.このチュートリアルの次の章でcallbackパラメータについて詳しく説明します.
slideDown()インスタンス

$(".flip").click(function(){
$(".panel").slideDown();
});

jQuery Fade関数-fadeIn(),fadeOut(),fadeTo()
jQueryには次のfade関数があります.

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

speedパラメータは、「slow」、「fast」、「normal」またはミリ秒の値を設定できます.
fadeTo()関数のopacityパラメータは、所与の不透明度に減衰することを規定する.
callbackパラメータは、この関数が完了した後に実行される関数名です.このチュートリアルの次の章でcallbackパラメータについて詳しく説明します.
jQueryカスタムアニメーション
jQuery関数は、カスタムアニメーションの構文を作成します.

$(selector).animate({params},[duration],[easing],[callback])

重要なパラメータはparamsです.アニメーションを生成するCSSプロパティを定義します.複数の属性を同時に設定できます.

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

2番目のパラメータはdurationです.アニメーションに適用する時間を定義します.設定された値は、「slow」、「fast」、「normal」またはミリ秒です.
≪インスタンス｜Instance｜emdw≫

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script> 

関数＃カンスウ＃
説明
$(selector).hide()
選択した要素を非表示
$(selector).show()
選択した要素を表示
$(selector).toggle()
選択した要素の切り替え(非表示と表示の間)
$(selector).slideDown()
選択した要素を下にスライド(表示)
$(selector).slideUp()
選択した要素を上にスライド(非表示)
$(selector).slideToggle()
選択された要素の上へのスライドと下へのスライドの切り替え
$(selector).fadeIn()
選択した要素をフェード
$(selector).fadeOut()
選択した要素をフェード
$(selector).fadeTo()
選択した要素を指定した不透明度にフェードアウト
$(selector).animate()
選択した要素のカスタムアニメーションを実行