Jquery .show()无法显示一个visibility属性为hidden的div

Question

基础的 jQuery 问题：

我正在尝试使用 jQuery 显示一个被标记为隐藏的 div，但是没有得到想要的效果。

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

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

尝试使用show()，fadeIn()等方法，但都没有起作用（它们对于style="display: none;"可以）。

我做错了什么？

- ChrisCa

---

尝试将你的jsfiddle框架改为jQuery。 - a'r

@a'r：问题仍然存在。这是一个已经修正的版本：http://jsfiddle.net/fkling/9Z6nt/19/ - Felix Kling

在你的例子中，你没有为你的项目设置正确的库，在“选择框架”中应该选择“jQuery”。 - megas

+1用来抵消负评，人们应该花更多时间尝试理解问题。 - Felix Kling

我认为是因为其他人认为你只是忘记选择正确的库（更改后，似乎问题已经解决了）。但他们没有仔细阅读你的问题和代码。否则，为什么第一条评论会获得5个赞？是的，也许你的jsfiddle不正确，但在我看来这并不足以导致负投票。问题即使没有那个(jsfiddle)也很清楚（而且很容易解决）。 - Felix Kling

Answer 1

如果你使用了visibility:hidden来隐藏它，那么你可以使用jQuery来显示它：

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

在代码演示中，你缺少了jQuery库。 这里有一个演示：http://jsfiddle.net/9Z6nt/20/

- Muhammad Usman

---

document.ready 不是必需的。代码在加载时运行（在框架上方选择框）。 - Felix Kling

哦，没注意到，谢谢。但如果在 DOM 准备好之前调用 JS，这将有助于实际代码的编写。 - Muhammad Usman

@Imray，它确实有效。它不是为了解决visibility:hidden的问题，我只是修复了他的一个问题。 - Muhammad Usman

Answer 2

根据 JQuery 文档 .show() "大致相当于调用 .css('display', 'block')，但是显示属性将还原为最初的值。" 直接设置样式即可。您可以使用 CSS 类。

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

并且使用set

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

- Polymorphix

---

$("#yourdiv").toggleClass('hidden')；不需要“shown”类 - Alexander Bird

这并不完全相同。它取决于CSS的其他部分可能存在的更一般的覆盖，但通常情况下，你可能会成功做到这一点。 - Polymorphix

Answer 3

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

例如：

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

for example:

<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

Answer 4

嘿，伙计，你的小玩意正在发挥作用，只需在小玩意中选择框架jQuery即可。如果它的可见性是隐藏的，则将CSS可见性属性更改为visible。

（“.Deposit”）.css（'visibility'，'visible'）;

- sushil bharwani

Answer 5

开始翻译吧 :)

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

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

    });

- George Matiashvili

---

没错，就是这个！ - Kirby

Answer 6

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

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

- George Matiashvili