toggle for visibility does not work IE7, FF 3.0.6 and Safari 3.1.2

[paulsperanza]

I have an image tag and I am trying to toggle it's visibility.

<tr>

<td>

<input name="txtReferralSource" type="text" id="txtReferralSource" style="width:300px;" /> &nbsp;&nbsp;<img id="imgLoading" src="images/ajax-loader.gif" style="visibility:hidden;" alt="Loading..." />

</td>

</tr>

I am trying to togggle the image's visibility.

$("#imgLoading").toggle();

Nothing happens. However this works perfectly

$("#imgLoading").css("visibility", "visible");

[dmethvin]

In jQuery, visibility is defined as taking up no space in the document. Most commonly that would be via display:none or width:0. There are other ways that an element might not be visible in the browser's viewport, including visibility:hidden, opacity:0, margin-left:-10000px, or being completely obscured by other elements higher in the z-index order. Those do not count as hidden as far as jQuery is concerned.

If you need to use the visibility (or opacity) attribute as your method of making an element invisible, just track and toggle it yourself.