【jQuery入門】エフェクトを使ってみよう

視覚効果（エフェクト）

jQueryでは視覚効果（エフェクト）を使うことができます。代表的なものについて記載します。なお、例では下記ボックスに対して視覚効果を与えています。

<div id ="box" style="width:100px;height:100px;background:red;"></div>

hideメソッド

hideはHTML要素を非表示にします。括弧内は特に何も指定しない場合は即座に消えます。

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

showメソッド 

非表示状態にあるものを表示します。

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

fadeOut

表示されている要素をフェードアウトさせます。

$(function(){
$('#box').fadeOut(800);
});

fadeIn

フェードアウトされているものをフェードインします。

$(function(){
$('#box').fadeOut(800);
$('#box').fadeIn(800);
});

toggle

jQueryで特定のHTML要素を表示・非表示することができます下記の例の場合は0.8秒単位で非表示→表示を繰り返します。

$(function(){
　$('#box').toggle(800);
　$('#box').toggle(800);
　$('#box').toggle(800);
　$('#box').toggle(800);
});

コールバック関数

視覚効果の第２引数に関数を指定することで視覚効果を行った後に何らかの処理を実行するといったことができます。

$(function(){
　$('#box').fadeOut(800,function(){
　alert("gone!");
　});
});