How to fade to display: inline-block

jquery fade
Boris Callens picture Boris Callens · Jul 7, 2009 · Viewed 72.4k times · Source

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

MakuraYami picture MakuraYami · Apr 25, 2012

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

Related questions

How do you fade in/out a background color using jquery?

How do I fade in text content with jQuery? The point is to draw the user's attention to the message.

Read More
How to fade changing background image

I want to fade the images when I do this code: $("#large-img").css('background-image', 'url('+$img+')'); I've tried putting fade in so many places. Thanks

Read More
Fade In on Scroll Down, Fade Out on Scroll Up - based on element position in window

I'm trying to get a series of elements to fade in on scroll down when they are fully visible in the window. If I keep scrolling down, I do not want them to fade out, but if I scroll up, …

Read More