jQuery 　エフェクトを使う　hide show fadeOut fadeIn - Three.jsを使って、作ってみた

これらのメソッドは、各要素にエフェクトをかけることができます。

１.「hide」
「hide」は、要素のうち表示状態にあるものを、アニメーションをしながら非表示にします。

こんな感じに使います。

$(function(){
    $('#box').hide();
});

hideの引数は、こんな感じです。

.hide( [duration ]  [, callback] )

durationやcallbackは指定しなくても実行できます。細かく指定したい場合に使います。

durationは、アニメーション時間です。「slow」,「normal」,「fast」や数値（ミリ秒）で指定します。

//fastで指定した場合
$('#box').hide('fast');

//数値で指定した場合（２秒）
$('#box').hide(2000);

durationを指定しない場合は、すぐ消えます。

callbackは、コールバック関数です。アニメーション終了時によばれる関数です。

こんな感じに使います。こちらは、アニメーション終了時にアラートが表示されます。

$('#box').hide(800,function(){
	alert('finish!');
});

実行結果
f:id:gupuru:20140531213106p:plain

２.「show」
「show」は、非表示状態にあるものを、アニメーションをしながら表示します。

基本的な使い方は、「hide」と同じです。
こんな感じに使います。

$(function(){
    $('#target').show();
});

showの引数は、こんな感じです。

.show( [duration ]  [, callback] )

durationやcallbackは、「hide」と同じです。durationはアニメーション時間で、callbackはコールバック関数です。

//durationに「slow」を使った場合
$('#target').show('slow');

//durationを数値で指定し、コールバック関数を使った場合
$('#target').show(800,function(){
	alert('finish!');
});

３.「fadeOut」
「fadeOut」は、各要素の透明度を操作して、表示されてる要素を非表示にします。
「hide」と似ていますが、こちらは、ふわっと消える感じです。

基本的な使い方は、「hide」や「show」と同じです。
こんな感じに使います。

$(function(){
     $('#target').fadeOut();
});

「fadeOut」の引数は、こんな感じです。

.fadeOut( [speed ]  [, callback] )

callbackは、「hide」や「show」と同じです。 speedもほぼ同じです。
speedはアニメーション時間で、「slow」,「normal」,「fast」や数値（ミリ秒）で指定します。
callbackはコールバック関数です。

//speedに「slow」を使った場合
$('#target').fadeOut('slow');

//speedを数値で指定し、コールバック関数を使った場合
$('#target').fadeOut(800,function(){
	alert('finish!');
});

４.「fadeIn」
「fadeIn」は、各要素の透明度を操作して、非表示の要素を表示させます。
「show」と似ていますが、こちらは、ふわっと表示する感じです。

基本的な使い方は、「fadeOut」と同じです。
こんな感じに使います。

$(function(){
     	$('#target').fadeIn();
});

「fadeIn」の引数は、こんな感じです。

.fadeIn( [speed ]  [, callback] )

speedやcallbackは、「fadeOut」と同じです。
speedはアニメーション時間で、callbackはコールバック関数です。

//speedに「fast」を使った場合
$('#target').fadeIn('fast');

//speedを数値で指定し、コールバック関数を使った場合
$('#target').fadeIn(800,function(){
	alert('finish!');
});

これで、終わります。