为什么jquery show（）在示例中不起作用

请考虑这个Plunk。它的目的是提供一个非常简单的加载机制模拟。为什么jquery show（）在示例中不起作用

我有一个简单的设置：

<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()不起作用。任何想法为什么？

PS：可能是非常愚蠢的东西，但我没有看到它。

来源

2016-01-12 Spikee

在CSS中写

display:none;，而不是知名度

了解更多关于在Here

的差异对于解释：

显示：无意思是有问题的标签将不会出现在页面（尽管你仍然可以通过dom与它进行交互）。其他标签之间不会分配空间。

可见性：隐藏意味着不同于display：none，标签不是可见，但空间在页面上分配给它。标记是呈现，它只是在页面上看不到。

来源

2016-01-12 12:48:23

@ParthTrivedi：我只是告诉他，纠正他的CSS –

是的，必须是一些简单的类似。奇怪的是，它不能在能见度上工作。 – Spikee

@Spikee：我给出了解释，你可以通过 –

内容visibility: hidden应display: none，并没有必要在onload你的JS的第二行，在这里看到：

http://plnkr.co/edit/MHbBjuCEVrIGpKarooLF

来源

2016-01-12 12:49:30 mikeb

是的，那多余的线是测试中的剩余线，我也删除它。 – Spikee

据jQuery的，(...)This is roughly equivalent to calling .css("display", "block")

所以，这个功能将不会更改CSS属性的'知名度'

来源

2016-01-12 12:55:09 jolmos

您需要将visibility:hidden更改为display:none并删除你的第二行JS（你运行相同的代码2次）。

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

这个代码添加CSS来#content elemment display:block不visibility:visible。如果你想使用visibility:hidden风格你必须改变你的代码是

$('#content').css('visibility','visible');

来源

2016-01-12 13:58:36

为什么jquery show（）在示例中不起作用

回答

相关问题