jquery fade element does not show elements styled 'visibility: hidden'

jquery visibility fadein
kalpaitch picture kalpaitch · Mar 12, 2010 · Viewed 44.5k times · Source

I have a bunch of thumbnails which I am loading with a style of visibility: hidden; so that they all maintain their correct layouts. Once the page is fully loaded I have a jquery function that fades them in. This worked when their style was set to display: none; but obviously the layout screwed up then. Any suggestions?

Heres the fade line:

$('.littleme').fadeIn('slow');

Answer

Nick Craver picture Nick Craver · Mar 12, 2010

Add a few calls to the chain like this:

 $('.littleme').css('visibility','visible').hide().fadeIn('slow');

This will change it to display:none for 1 frame before fading in, occupying the area again.

Related questions

How do I check if an element is hidden in jQuery?

Is it possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()? How would you test if an element is visible or hidden?

Read More
Equivalent of jQuery .hide() to set visibility: hidden

In jQuery, there are .hide() and .show() methods which sets the CSS display: none setting. Is there an equivalent function which would set the visibility: hidden setting? I know I can use .css() but I prefer some function like .hide() …

Read More
How can I make visible an invisible control with jquery? (hide and show not work)

How can I change the visibility of a control with jQuery? I have a control that its visible property to false (not css). When I used show() function for it nothing happened, it seems that hide() and show() methods are …

Read More