views:

561

answers:

3

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');
+3  A: 

try using opacity and animate():

$('.littleme').css('opacity',0).animate({opacity:1}, 1000);
David
I am always a bit weary of using opacity in regards to css because of IE. Presumably jquery handles this with no problems???
kalpaitch
This won't work since it's still not visible, test to see for yourself.
Nick Craver
of course, you have to remove the visibility:hidden. And yes, jQuery handles the opacity issue in IE.
David
+3  A: 

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.

Nick Craver
Cheers works well. No noticeable delay or shift in that 1 frame.
kalpaitch
A: 

Try matching for the hidden element?

$(".littleme:hidden").fadeIn();

iivel