I have a bunch of thumbnails which I am loading with a style of visibility: hidden;
so that they all maintain their correc开发者_StackOverflowt 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');
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.
try using opacity and animate()
:
$('.littleme').css('opacity',0).animate({opacity:1}, 1000);
<span style="opacity:0;">I'm Hidden</span>
To Show : $('span').fadeTo(1000,1)
To Hide : $('span').fadeTo(1000,0)
The space is preserved in the DOM layout
http://jsfiddle.net/VZwq6/
Cant you use fadeTo(duration, value) instead? Surely this way you can fade to 0 and 1, that way you are not affecting the document flow...
Try matching for the hidden element?
$(".littleme:hidden").fadeIn();
精彩评论