Question

我有以下代码：

$('#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 !!

Answer 1

jQuery的.show()和.hide()仅对CSS display属性进行操作，而不对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');
}

Answer 2

使用display:none;代替公开

这对我来说很好用

$(function(){   

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

});

工作样本：http://jsfiddle.net/HShHg/6/

Answer 3

根据文件：

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

所以，如果你搞砸了visibility，那对你没有帮助。

您应该做的是，始终隐藏.css('display', 'none')或.hide()

我刚刚发现这个有用的docs：

可见性：隐藏或不透明度：0 的元素被视为可见，因为它们仍占用布局中的空间。

Answer 4

jQuery .show()要求拥有display:none css属性

Answer 5

我会坚持将visibility: hidden;放在元素上，然后使用.css("visibility", "visible");来精确显示它，因为它仍会占用页面上的空间。

这样可以避免在加载时出现抖动的页面以及看不见的Flash内容（FOUC）。

Answer 6

<!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>

JQuery Visible Show

6 个答案: