How to fade to display: inline-block

boris_callens_11333 0
Viewed 76709

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?

fade jquery
6 Answers

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

user_283760

This works even with display:none preset by css. Use

$('#element').fadeIn().addClass('displaytype');

(and also $('#element').fadeOut().removeClass('displaytype');)

with setup in CSS:

#element.displaytype{display:inline-block;}

I consider this a workaround as I believe fadeIn() should work so that it would just remove the last rule - display:none when set to #element{display:inline-block;display:none;} but it is malfunctioningly removing both.

user_20956420
Related