消えるでござるよ

いよいよ画面上ではっきりと分かるjQueryらしいところにやってきましたね。
今回はフェードです。

fadeIn

フェードイン、要素をふんわりと表示させるエフェクトをつけることができます。

$('.fade1').on('click',function()
{
 $('.fade1Elem').fadeIn(1000,'easeInOutExpo',function(){ alert('表示完了よ！(*ﾟ∀ﾟ)'); });
})

引数について

フェードインの引数は２つ。
第一引数には処理開始から完了までの経過時間(どんくらいかけてフェードさせるか。ミリ秒)
第二引数にはeasing。
第三引数はコールバック、つまり処理が完了したら実行する処理
をそれぞれ指定してあげます。
フェード系のeasingはちょっとわかりにくい。指定なくても大丈夫です。
指定ない場合はフェード指定を抜いて
第一引数：時間
第二引数：関数
の指定にしましょう

簡単な仕組みについて

こんな感じで動いていますよ。

1. display指定の削除(DOMの初期値にあわせる)
2. opacityを0に
3. 指定秒数を使ってopacityを0から1に増やしていく

デベロッパーツール等を使って実際にどうなっているのかを確認してみておいてください。

fadeOut

フェードアウト　です。
フェードインの逆、消えていきます。
基本的な使い方はフェードインと同じなので、サンプルだけで後は省略します。

$('.fade2').on('click',function()
{
 $('.fade2Elem').fadeOut(1000,'easeInOutExpo',function(){ alert('この俺を消しても第二第三の俺が出てくるんだぜ(*ﾟ∀ﾟ)'); });
})

fadeTo

こいつは指定の透明度まで変化させてくれるメソッドとなります。
display:noneの場合も表示されてから指定透明度まで変化してくれます。
第一引数：経過秒数
第二引数：透明度
第三引数：コールバック
です

$('.fade3').on('click',function()
{
 $('.fade3Elem').fadeTo(1000,0.5,function(){ alert('透明度0.5'); });
})