JQuery Visible Show

Question

I have the following code:

$('#loading').css("visibility", "visible");

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

For some reason unknown to me when I use the CSS it works!

But when I use .show();

It does not work. Please kindly help. I am a new to JQuery.

Thank you.

Edit:

<div class="footerOrder" id="loading" style="visibility:visible;">
      <img src="../utils/loadingExistenz.gif" width="32" height="32" border="0" />
</div>

Tried this:

<div class="footerOrder" id="loading" style="display:block;">

Then:

$('#loading').hide();

And still no go for some reason!

EDIT: Weird thing is it is working for all the other DIVs!!

Answer 1

jQuery's .show() and .hide() only operate on the CSS display property, not on the visibility property. I just checked the jQuery 1.7 source code and verified that is the case.

So, .css('display', 'none') would be matched with .show().

If you want to change the visibility, you would just change the css directly or make your own hideV() and showV() methods to do it for you:

jQuery.fn.showV = function() {
    this.css('visibility', 'visible');
}

jQuery.fn.hideV = function() {
    this.css('visibility', 'hidden');
}