BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] サンプルでjquery show()が動作しない理由

2022-02-19 20:16:37

質問

ご検討ください プランク . その目的は、ロード機構の非常に簡単なシミュレーションを提供することです。

簡単な設定をしています。 

  <body>
    <div id="loading">
      <img src="http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif"/>
    </div>
    <div id="content">
      <h3>Content fully loaded.</h3>
    </div>
  </body>

ここで content はCSSで隠します。 

body 
{
  width: 100%;
  height: 100%;
}

#loading {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

#content {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

Javascriptも同様にシンプルです。 

$(window).ready(function() 
{
  simulateLongLoad();
  $('#content').show();
});

function simulateLongLoad() 
{
  setTimeout(showContent, 2000);
}

function showContent() 
{
  $('#loading').hide();
  $('#content').show();
}

しかし、なぜか .show() の#contentが機能しません。何か心当たりはありますか？

追記：何か非常に愚かなことをした可能性がありますが、私にはそれが見えません。

解決方法は？

をcssで記述します。 display:none; と表示され、可視化されません。

以上の違いについてもっと読む ここで

説明のために :

display:noneは、当該タグが表示されないことを意味します。 ページで使用することができます)。 他のタグの間にスペースが確保されることもありません。

visibility:hiddenは、display:noneとは異なり、タグを表示しないことを意味します。 表示されますが、ページ上にそのためのスペースが確保されます。タグは レンダリングされますが、ページ上では見えません。

しかし、もしvisibilityを使用し、JQueryで表示/非表示を行いたい場合は、以下のようにします。 

$('#element').css('visibility', 'visible'); //to show
$('#element').css('visibility', 'hidden'); //to hide

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します