how to use fadeIn with display=inline-block [duplicate]

Question

I try to fadeIn a div which (should) have a display inline-block.
It seems the fadeIn method assumes only display=block.
Is there a way to change that behavior?

Answer 1

If you use css()?

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

Answer 2

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 3

I'd suggest putting an extra element layer inside the inline-block element, and fading that in instead.

<div style='display:inline-block;'>
    <div id='fadmein'>....</div>
</div>

$('#fademein').fadeIn();

I know it's extra markup, but it's probably the most pragmatic solution to the problem.

The alternative would be to use JQuery's animate() method to change the opacity, rather than using fadeIn(). This would only change the opacity property; so the display property would be untouched.

Answer 4

According to this question in the jQuery Forums, the suggested solution is to change its ´display´ property to block and floating it.