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?

MakuraYami · Answer 1 · 2013-09-27T17:38:30.480

248

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

edited Sep 27 '13 at 17:38

answered Apr 25 '12 at 19:44

MakuraYami

3,398
3
16
19

6

This is definitely the better answer. – Jason Feb 22 '13 at 20:34
26

Great answer! Even better, you can leave it empty to default to whatever you have in your CSS: `$("div").fadeIn().css("display","");` – Brandon Durham Feb 07 '14 at 20:11
1

This really ought to be the accepted answer; the existing accepted answer is more of a comment. – Sinister Beard Sep 30 '15 at 09:50
`$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });` to be sure that display:inline-block is done when the fadein is finished – Simon Sep 20 '16 at 11:39
it doesn't work for me... applied on a div with an initial display style set to none using a class. Inspecting the element I see that for some milliseconds, right after calling the fadeIn, it has inline-block in its style, then style is set to block. with Simon suggestion the effect is not nice, as during the fadeIn the element is displayed as block – Giox Nov 07 '16 at 16:40
In IE edge this causes a flicker effect which makes this route unusable for that browser – Phyllis Sutherland Dec 07 '17 at 22:48
Best solution in 2019 – Esteban Castro Sola Apr 01 '19 at 10:44
woosh ... you are now happy – Kennet Celeste Aug 17 '19 at 19:09

score 40 · Accepted Answer · answered Jul 07 '09 at 09:53

40

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

answered Jul 07 '09 at 09:53

philnash

70,667
10
60
88

I like this solution better, keeps the CSS out of my JS. – joshuadelange Jul 17 '13 at 15:30
14

@joshuadelange not really, opacity is also CSS – Roy Feb 10 '14 at 22:13
+1 for focusing the engineering process of showing/hiding elments on where it should be. – klewis May 15 '14 at 20:17

score 11 · Answer 3 · answered Nov 19 '11 at 10:30

Just to flesh out Phil's good idea, here is a fadeIn() that loads fades in each element with the class .faded in turn, converted to animate() :

Old:

$(".faded").each(function(i) {
    $(this).delay(i * 300).fadeIn();
});

New:

$(".faded").each(function(i) {
    $(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500);
});

Hope that help another jQuery newb like myself :) If there's a better way to do that, please tell us!

score 9 · Answer 4 · answered Jan 27 '14 at 16:55

Makura's answer did not work for me so my solution was

<div id="div" style="display: none">Some content</div>

$('#div').css('display', 'inline-block').hide().fadeIn();

hide immediately applies display: none but before that it saves the current display value in the jQuery data cache which will be restored by the subsequent animation calls.

So the div starts statically defined as display: none. Then it is set to inline-block and immediately hidden just to be faded in back to inline-block

score 2 · Answer 5 · edited Mar 13 '15 at 18:10

2

According to the jQuery docs for .show(),

If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

So my solution to this problem was to apply a css rule to a class display: inline-block on the element, then I added another class called "hide" which applies display: none; When I .show() on the element, it showed inline.

edited Mar 13 '15 at 18:10

aug

11,138
9
72
93

answered Aug 05 '13 at 18:13

amurrell

2,383
22
26

I would assume that this should also work when you set `#el{display:inline-block;display:none;}` and then run `$('#el').fadeIn();` you get inline-block. But it doesn't. – Fanky Jan 23 '18 at 12:24

score 1 · Answer 6 · answered Jan 23 '18 at 12:34

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.

How to fade to display: inline-block

6 Answers6

Linked

Related