2011-08-18 jQuery 1.6.1

要素を表示したり消したりするときはshowメソッドとhideメソッドを使う

<div id="a">hoge</div>

表示したり

$("#a").show();

消したり

$("#a").hide();

このように書くと瞬間的にパッ！パッ！と消えたり表示したりする。hideすると要素は完全にないものとして扱われる（周りの要素が位置に関しての影響をうけて位置がズレたりする）

消すのと表示するのに移行する間隔を指定するとアニメーションするようになる

$("#a").show("slow");

消したり

$("#a").hide("slow");

メソッドチェーンで繋げると前のメソッドが完了した後に次のメソッドが動く

$("#a").hide("slow").show("slow");

↓このように書いても同様の効果を得られる

$("#a").hide("slow");
$("#a").show("slow");

違う要素のメソッドを呼び出すと・・・

$("#a").hide("slow");
$("#b").hide("slow");

最初の要素が消えてから次の要素が消えるわけでなく、同時に消える。

シーケンスにやりたい場合は動作完了時のコールバックがとれるのでここでやればOK

$("#a").hide("slow",function(){
    $("#b").hide("slow");
});

でもこれだとデータから連続的に動きを生成しにくい（データの分だけ入れ子を書き続けないといけない）ので軽くラップする

function Hoge(id){
    var $hoge = $("#" + id);
    var next = {show : function(){}, hide : function(){}};
    this.show = function(){
        $hoge.show("slow", function(){ next.show()});
    };
    this.hide = function(){
        $hoge.show("slow", function(){ next.hide()});
    };
 
    this.setNext = function(n){
        next = n;
    };
}