:hidden 不可視な要素 visibility:hidden

visibilityがhiddenやdisplayがnoneな要素、あるいは、input要素のtype属性が"hidden"のすべての要素にマッチします。 では、まず、visibilityがhiddenなケースを試してみます。

下記の「click!」というボタンをクリックしてみてください。

visibility:hidden;



ソースは次の通りですが、ボタンをクリックすると、 ID名が「#my1」要素内にあるvisibility:hidden;の要素に色など指定して表示(可視化)します。
<div id="my1">
  <div style="visibility:hidden;">visibility:hidden;</div>
  <button id="btn">click!</button>
</div>

<script type="text/javascript">
jQuery(function($){
  $("#btn").click(function(){
    $(":hidden","#my1")
        .html("こんにちは")
        .css("width","300px")
        .css("padding","12px")
        .css("background-color","gold")
        .css("visibility","visible")
  })
});
</script>
では、次ページで、 display:none ; を試します。