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

This question already has answers here: How to fade to display: inline-block (6 answers) Closed 8 years ago.

I try to fadeIn a div which (should) have a display inline-b开发者_JAVA技巧lock.

It seems the fadeIn method assumes only display=block.

Is there a way to change that behavior?

---

If you use css()?

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

---

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);

---

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.

---

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