アニメーション効果

jQueryならwebページに動きを付けるアニメーション効果(動きのあるUI)を簡単に実装出来る。

メソッド	意味
show()	要素を徐々に表示する
hide()	要素を徐々に非表示にする
toggle()	要素の表示・非表示を切り替える
sideDown()	要素をスライドアニメーションで表示する
sideUp()	要素をスライドアニメーションで非表示にする
sideToggle()	要素の表示・非表示をスライドアニメーションで切り替える
fadeIn()	要素をフェードインで表示する
fadeOut()	要素をフェードアウトで非表示にする
fadoTo()	要素の透明度を指定した値に徐々に変更する
animate()	任意のCSSプロパティの値を徐々に変更する

$(セレクター).メソッド(スピード,コールバック関数);

<button id="show">表示</button>
<button id="hide">非表示</button>

div{
    width:200px;
    height:200px;
    background:red;
    display:none;
}

$(function(){
    $("button#show").click(funcktion(){
        $("div").show("slow",function(){
            $(this).css("background","blue");
        });
    });
    $("button#hide").click(function(){
        $("div").hide("slow");
    });
});