How to fade to display: inline-block

Question

In my page I have a bunch (about 30) dom nodes that should be added invisible, and fade in when they are fully loaded.
The elements need a display: inline-block style.

I would like to use the jquery .fadeIn() function. This requires that the element initially has a display: none; rule to initially hide it. After the fadeIn() the elements off course have the default display: inherit;

How can I use the fade functionality with a display value other than inherit?

Answer 1

You could use jQuery's animate function to change the opacity yourself, leaving the display unaffected.