web-dev-qa-db-ja.com

JQuery Visible Show

私は次のコードを持っています：

$('#loading').css("visibility", "visible");

$('#loading').show();

何らかの理由で、CSSを使用しても動作しないことがわかります。

しかし、私が.show（）を使用するとき;

それは動作しません。親切に助けてください。私はJQueryの初心者です。

ありがとうございました。

編集：

<div class="footerOrder" id="loading" style="visibility:visible;">
      <img src="../utils/loadingExistenz.gif" width="32" height="32" border="0" />
</div>

これを試しました：

<div class="footerOrder" id="loading" style="display:block;">

次に：

$('#loading').hide();

まだ理由はありません！

編集：奇妙なことは、それが他のすべてのDIVのために働いていることです！

jqueryvisibility
27
iTEgg

つかいます display:none;可視性の代わりに

これは私のためにうまくいきます

$(function(){   

    $("#aLink2").click(function(){
        $('#loading').show();
    });  

});​

作業サンプル： http://jsfiddle.net/HShHg/6/

29
Shyju

jQueryの.show()および.hide()は、displayプロパティではなく、CSS visibilityプロパティでのみ動作します。 jQuery 1.7のソースコードを確認し、それが正しいことを確認しました。

したがって、.css('display', 'none')は.show()と一致します。

可視性を変更したい場合は、cssを直接変更するか、独自のhideV()およびshowV()メソッドを作成してそれを実行します。

jQuery.fn.showV = function() {
    this.css('visibility', 'visible');
}

jQuery.fn.hideV = function() {
    this.css('visibility', 'hidden');
}
38
jfriend00

ドキュメントによると：

.show() This is roughly equivalent to calling .css('display', 'block')

したがって、visibilityを台無しにした場合、それは役に立ちません。

すべきことは、常に.css('display', 'none')または.hide()で非表示にすることです

これが便利だと思いました docs ：

可視性を持つ要素：hiddenまたは不透明度：0は可視であるとみなされます 、まだレイアウト内のスペースを消費するため。

5
gdoron

jQuery .show()にはdisplay:none cssプロパティが必要です

3
Hemal

要素に_visibility: hidden;_を付けてから、.css("visibility", "visible");を使用して、ページ上のスペースをまだ占有しているため、正確に表示します。

これにより、読み込み中のページの乱れや、目に見えないコンテンツの恐ろしいフラッシュ（ [〜＃〜] fouc [〜＃〜] ）が回避されます。

1
sanjsanj
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div#sidebar-collapses').click(function(){
  if ( $("#title").is(":hidden") ) { 
    $("#title").show(); 
  } else if ( $("#title").is(":visible") ) { 
    $("#title").hide(); 
  }
})

});
</script>
</head>
<body>
<div class="sidebar-collapse" style="" id="sidebar-collapses">
     <a href="#" class="sidebar-collapse-icon with-animation">
         Test              
         <i class="menu"></i>
     </a>
 </div>
 <a href="mysite_url" id="title" style="display:none;"> <br> My Site Name </a>

</body>
</html>
0
Vipin Pandey