jQuery .show（）不显示具有隐藏可见性的div

80

jQuery基本问题：

我试图揭示一个div使用jQuery标记为隐藏的。但是还不够

我在这里创建了一个JSFiddle：http : //jsfiddle.net/VwjxJ/

基本上，我想使用style="visibility: hidden;"而不是style="display: none;"因为我想保持隐藏元素的空间

曾尝试使用show()，fadeIn()等，但均无效（它们用于style="display: none;"）

我究竟做错了什么？

javascript jquery html

— 克里斯卡
source

6

尝试将jsfiddle上的框架更改为jQuery。

— 2011年

1

@ a'r：问题仍然存在。这是一个更正的版本：jsfiddle.net/fkling/9Z6nt/19

— Felix Kling

在您的示例中，您没有为项目设置正确的库，在“选择框架”中应选择“ jQuery”。

— 兆

5

+1以反对不赞成投票的人。...人们应该花更多的时间来尝试理解问题...

— Felix Kling

5

我认为这是因为其他人认为您只是忘了选择正确的库（在更改它之后，它似乎起作用了）。但是他们没有仔细阅读您的问题和代码。为什么第一条评论会获得5票赞成？是的，也许您的jsfiddle是不正确的，但是这并不是拒绝imo的理由。即使没有这个问题，问题也很明显（而且很容易解决）。

— Felix Kling

122

如果您已将其隐藏，visibility:hidden则可以使用jQuery通过以下方式显示它：

$(".Deposit").css('visibility', 'visible');

在小提琴中，您缺少jQuery。这是一个演示： http : //jsfiddle.net/9Z6nt/20/

— 穆罕默德·乌斯曼（Muhammad Usman）
source

document.ready没有必要。运行代码onLoad（框架上方的选择框）。

— Felix Kling

哦，没注意到，谢谢。但是，如果在准备好DOM之前调用JS，则在实际代码中会很有帮助。

— 穆罕默德·乌斯曼

1

@Imray确实如此。它不是针对解决方案的visibility:hidden，我只解决了他的问题。

— 穆罕默德·乌斯曼

11

根据JQuery文档，.show()“.css('display', 'block')除了将display属性恢复到最初的状态外，它大致等同于调用”。而是显式设置样式。您可以使用CSS类

.hidden{
    visibility: hidden;
}
.shown{
    visibility: visible;
}

并设置使用

$("#yourdiv").removeClass("hidden").addClass("shown");

— 多形体
source

$("#yourdiv").toggleClass('hidden'); 无需“展示”课程

— 亚历山大·伯德

1

不完全一样。这取决于CSS其他部分中可能更通用的替代，但是通常您可能会避免，是的。

— Polymorphix

7

如果要保留隐藏元素的空间，请使用不透明度。

即：

$('div').fadeTo(500,1) //show
$('div').fadeTo(500,0) //hide

例如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style='opacity:0'>
  Test opacity
</div>


<button onclick="$('div').fadeTo(500,1);">Show</button>
<button onclick="$('div').fadeTo(500,0);">Hide</button>

展开摘要

— 瓦吉利（MJ Vakili）
source

3

嘿，您的小提琴正在工作，只需在小提琴上选择框架jQuery。如果其可见性隐藏，则将css可见性属性更改为visible。

(".Deposit").css('visibility','visible');

— Sushil Bharwani
source

2

开始了：）

$(".Deposit").show();

    $(".Deposit").fadeOut(500,function(){
        $(this).css({"display":"block","visibility":"hidden"});

    });

— 乔治·马蒂亚什维利
source

是的，那是票！

— 柯比

0

$(".Deposit").show();

$(".Deposit").fadeTo(500,0);

— 乔治·马蒂亚什维利
source