75

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');
kalpaitch
  • 5,193
  • 10
  • 43
  • 67

5 Answers5

159

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
  • 623,446
  • 136
  • 1,297
  • 1,155
  • Cheers works well. No noticeable delay or shift in that 1 frame. – kalpaitch Mar 12 '10 at 21:15
  • 3
    and the reverse: `$('.littleme').fadeOut(speed,function(){$('.littleme').css("visibility","hidden").css("display","");});` :-) – eruciform Jun 29 '11 at 21:45
  • 5
    @eruciform - to eliminate the `display: none` at the end, you can just do `$('.littleme').fadeTo(speed, 0);`, which won't set `display` at the end, same effect with less work :) – Nick Craver Jun 29 '11 at 23:13
  • 2
    `$('.littleme').fadeTo(speed, 0, function(){ $(this).hide();});` for setting it to `display:none` after the animation. thanks @NickCraver for the original snippet :) – StrikeForceZero Mar 07 '13 at 06:46
28

try using opacity and animate():

$('.littleme').css('opacity',0).animate({opacity:1}, 1000);
David Hellsing
  • 106,495
  • 44
  • 176
  • 212
  • I am always a bit weary of using opacity in regards to css because of IE. Presumably jquery handles this with no problems??? – kalpaitch Mar 12 '10 at 20:54
  • This won't work since it's still not visible, test to see for yourself. – Nick Craver Mar 12 '10 at 20:55
  • 1
    of course, you have to remove the visibility:hidden. And yes, jQuery handles the opacity issue in IE. – David Hellsing Mar 13 '10 at 09:48
  • Edge case. If there is iframe content inside an opacity: 0 wrapper, jquery will not be able to animate this is for IE. You can use filter: inherit to try and help out with this issue, but if the iframe is out of your control (i.e. social sharing widgets) you may have to go with the excepted answer. – Paul T Dec 13 '12 at 20:07
11

<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/

user
  • 17,781
  • 20
  • 98
  • 124
  • 1
    Since opacity isn't supported in IE<9 and I want to start with an invisible state I coupled this solution with https://github.com/bladeSk/internet-explorer-opacity-polyfill – Chris Marisic Aug 06 '14 at 20:19
  • Thank you - great advice - worked for me in my case when the element that I have added - was blinking in for one millisecond before disappearing and starting to fadeIn. :) THe fadeTo and opacity:0 - resolved the issue of blinking of the element after I added it to the dom and before gave the command to fadeIn. – Pasha Apr 10 '21 at 18:38
1

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...

Neil
  • 7,861
  • 4
  • 53
  • 74
0

Try matching for the hidden element?

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

iivel
  • 2,576
  • 22
  • 19