jQuery 可视化展示
Posted
技术标签:
【中文标题】jQuery 可视化展示【英文标题】：JQuery Visible Show 【发布时间】：2012-04-02 23:26:51 【问题描述】：我有以下代码：
$('#loading').css("visibility", "visible");
$('#loading').show();
由于某些我不知道的原因，当我使用 CSS 时它可以工作！
但是当我使用 .show();
它不起作用。请帮助。我是 JQuery 的新手。
谢谢。
编辑：
<div class="footerOrder" id="loading" style="visibility:visible;">
<img src="../utils/loadingExistenz.gif" border="0" />
</div>
试过这个：
<div class="footerOrder" id="loading" style="display:block;">
然后：
$('#loading').hide();
由于某种原因仍然没有成功！
编辑：奇怪的是它适用于所有其他 DIV！
【问题讨论】：
【参考方案1】：<!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>
【讨论】：
【参考方案2】：jQuery .show() 需要有 display:none css 属性
【讨论】：
【参考方案3】：我会坚持将visibility: hidden; 放在元素上，然后使用.css("visibility", "visible"); 精确显示它，因为它仍然占用页面空间。
这将避免在加载时出现抖动的页面以及可怕的看不见内容的 Flash (FOUC)。
【讨论】：
【参考方案4】：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');
【讨论】：
在文档中找到这个：Elements with **visibility: hidden** or opacity: 0 are considered to be visible, since they still consume space in the layout.【参考方案5】：
根据文档：
.show() This is roughly equivalent to calling .css('display', 'block')
所以如果你搞砸了visibility，它对你没有帮助。
你应该做的是，总是用.css('display', 'none')或.hide()隐藏
我刚刚发现这很有用 docs:
具有 visibility: hidden 或 opacity: 0 的元素被视为可见，因为它们仍会占用布局中的空间。
【讨论】：
【参考方案6】：使用display:none; 代替可见性
这对我来说很好用
$(function()
$("#aLink2").click(function()
$('#loading').show();
);
);
工作样本：http://jsfiddle.net/HShHg/6/
【讨论】：
我看到了您的示例并且它正在工作，但我无法让它在我的页面中工作。你认为同时拥有一个类和一个 ID 会导致这种行为吗？ 元素的 ID 应该是唯一的。使用 firebug 控制台选项卡检查是否存在其他脚本错误 @i。不，它不能！元素上有visibility: hidden 吗？你是怎么隐藏的？
很好地发现了问题：window.document.getElementById("loading").style.visibility = "hidden";代码中的某个地方阻止了它！
@iGuygar : 很高兴你知道了。以上是关于jQuery 可视化展示的主要内容，如果未能解决你的问题，请参考以下文章