Jquery .show（）没有透露隐藏可见性的div

Question

Basic jQuery question:

I am trying to reveal a div that has been marked as hidden using jQuery. But am not quite getting it

I've created a JSFiddle here: http://jsfiddle.net/VwjxJ/

Basically, I want to use style="visibility: hidden;" rather than style="display: none;" as I want the space of the hidden element to be maintained

Have tried using show() , fadeIn() etc but neither work (they do for style="display: none;" )

what am I doing wrong?

Answer 1

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/

Answer 2

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");

Answer 3

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

ie:

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

Answer 4

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');

Answer 5

here we go :)

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

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

    });

Answer 6

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

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