How to use fadeIn with display = inline-block

Question

I am trying a fadeIn div that (should) have an inline display block.
The fadeIn method seems to only suggest display = block.
Is there any way to change this behavior?

Answer 1

From a combination of what I read above, this is the best I got:

$(div).css({ opacity: 0, display: 'inline-block' }).animate({opacity:1},600); 

Answer 2

Should you use css() ?

 $("div").fadeIn().css("display","inline-block"); 

Answer 3

I suggest adding an additional element element inside the inline-block element inline-block instead.

 <div style='display:inline-block;'> <div id='fadmein'>....</div> </div> $('#fademein').fadeIn(); 

I know this is additional markup, but this is probably the most pragmatic solution to the problem.

An alternative would be to use the jQuery animate() method to change the opacity, and not to use fadeIn() . This will only change the opacity property; therefore, the display property will not be touched.

Answer 4

According to this question on jQuery forums, the proposed solution is to change its isisplay property to block and float.