More than 1 year has passed since last update.

CSSのdisplayとvisibilityは、それぞれ要素の表示、非表示を切り替えます。
では何が違うかというと、非表示にした要素の領域を、確保するか詰めるかの違いがあります。
下記の3つの要素で、例えます。

01.gif

真ん中に設置されているblueに、display:none;を指定します。

jQuery表記

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

CSS表記

#blue {
    display: none;
}

id:blueの合った領域は詰められます。

03.gif

次はvisibility:hidden;を指定します。

jQuery表記

$("#blue").css("visibility","hidden");

CSS表記

#blue {
    visibility : hidden;
}

id:blueの領域は確保されたまま、非表示になります。

02.gif

非表示要素の領域を詰めたい時はdisplayを使い、
非表示要素の領域を確保したい時はvisibilityを使いましょう。