Show()不显示具有隐藏可见性的 div

基本 jQuery 问题:

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

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

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

尝试过使用 show()，fadeIn()等，但都不起作用(他们为 style="display: none;"做)

我做错了什么？

100536 次浏览

小开

最佳答案

If you have hidden it with visibility:hidden then you can show it with jQuery by

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

And in the fiddle you are missing jQuery. Here is a demo: http://jsfiddle.net/9Z6nt/20/

小开

Hey man your fiddle is working just choose framework jQuery on the fiddle. If its visibility hidden then change the css visibility property to visible.

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

小开

According to JQuery documentation .show() "is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially." Set the style explicitly instead. You could use a CSS class

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

and set is using

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

小开

here we go :)

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


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


});

小开

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


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

小开

If you want the space of the hidden element to be maintained, use opacity.

i.e:

$('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>