JQuery 可视化展示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9753883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Visible Show
提问by iTEgg
I have the following code:
我有以下代码：
$('#loading').css("visibility", "visible");
$('#loading').show();
For some reason unknown to me when I use the CSS it works!
出于某种原因，当我使用 CSS 时我不知道它的工作原理！
But when I use .show();
但是当我使用 .show();
It does not work. Please kindly help. I am a new to JQuery.
这是行不通的。请帮助。我是 JQuery 的新手。
Thank you.
谢谢你。
Edit:
编辑：
<div class="footerOrder" id="loading" style="visibility:visible;">
<img src="../utils/loadingExistenz.gif" width="32" height="32" border="0" />
</div>
Tried this:
试过这个：
<div class="footerOrder" id="loading" style="display:block;">
Then:
然后：
$('#loading').hide();
And still no go for some reason!
而且还是因为某种原因没有去！
EDIT: Weird thing is it is working for all the other DIVs!!
编辑：奇怪的是它适用于所有其他 DIV！
回答by jfriend00
jQuery's .show()and .hide()only operate on the CSS displayproperty, not on the visibilityproperty. I just checked the jQuery 1.7 source code and verified that is the case.
jQuery 的.show()并且.hide()只对 CSSdisplay属性进行操作，而不是对visibility属性进行操作。我刚刚检查了 jQuery 1.7 源代码并验证了这种情况。
So, .css('display', 'none')would be matched with .show().
所以，.css('display', 'none')将与.show().
If you want to change the visibility, you would just change the css directly or make your own hideV()and showV()methods to do it for you:
如果你想改变的知名度，你只需直接更改CSS或使自己hideV()和showV()方法来为你做它：
jQuery.fn.showV = function() {
this.css('visibility', 'visible');
}
jQuery.fn.hideV = function() {
this.css('visibility', 'hidden');
}
回答by Shyju
Use display:none;instead of visibility
使用display:none;而不是可见性
This works fine for me
这对我来说很好用
$(function(){
$("#aLink2").click(function(){
$('#loading').show();
});
});?
Working sample : http://jsfiddle.net/HShHg/6/
工作示例：http: //jsfiddle.net/HShHg/6/
回答by gdoron is supporting Monica
According to the docs:
根据文档：
.show() This is roughly equivalent to calling .css('display', 'block')
.show() This is roughly equivalent to calling .css('display', 'block')
so if you messed up with the visibility, it won't help you.
所以如果你搞砸了visibility，它不会帮助你。
What you should do is, always hide with .css('display', 'none')or with .hide()
你应该做的是，总是隐藏.css('display', 'none')或.hide()
I've Just found this useful docs:
我刚刚找到了这个有用的文档：
Elements with visibility: hiddenor opacity: 0 are considered to be visible, since they still consume space in the layout.
具有visible : hidden或 opacity: 0 的元素被认为是可见的，因为它们仍然占用布局中的空间。
回答by Hemal
jQuery .show()requires to have display:nonecss property
jQuery.show()需要有display:nonecss 属性
回答by sanjsanj
I would stick with putting visibility: hidden;on the element and then use .css("visibility", "visible");to show it precisely because it still takes up space on the page.
我会坚持放置visibility: hidden;元素，然后使用.css("visibility", "visible");它来精确显示它，因为它仍然占用页面上的空间。
That will avoid jittery pages while loading and the dreaded Flash of Unseen Content (FOUC).
这将避免加载时出现抖动的页面和可怕的未见内容 ( FOUC) Flash 。
回答by Vipin Pandey
<!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>
