how to use fadeIn with display=inline-block

Question

I try to fadeIn a div which (should) have a display inline-block.
It seems the fadeIn method assumes only display=block.
Is there a way to change that behavior?

score 22 · Answer 1 · answered Jul 16 '11 at 14:43

22

If you use css()?

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

answered Jul 16 '11 at 14:43

Sotiris

38,986
11
53
85

4

I haven't tried this, but I have a feeling it might cause the element to jump around a bit, as it would be changed to `display:block;` during the animation, and then back to `display:inline-block` after the animation had finished. So I don't think it's going to work. Might be worth trying out though, so +1 anyway. – Spudley Jul 16 '11 at 14:51
@Spudley I thought is also and tried it with `position:inline` instead `position:inline-block` to see if shows it first as `display:block` but it didn't. http://jsfiddle.net/6DcY9/ Of course depending on the other code this may happen – Sotiris Jul 16 '11 at 14:54
I'm doing a `fadeIn("fast").css({'display':'inline-block'})` and it doesn't cause my layout to jump around at all. I think it sets the display property before the fadeIn finishes. Additionally, since IE7 doesn't know how to interpret inline-block, I'm checking whether `html` has a class of `ie7` then setting `.css({'display':'inline','zoom':'1'})` instead. – WNRosenberg Aug 01 '12 at 17:16
@Spudley - the `.css("display","inline-block")` is not queued to run after the animation, it happens right when the animation begins – antishok Jun 02 '13 at 21:04

score 20 · Accepted Answer · answered Jul 16 '11 at 14:53

20

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

answered Jul 16 '11 at 14:53

Itay Moav -Malimovka

52,579
61
190
278

Just great man.. Thanks – Novasol Sep 27 '17 at 23:23

score 6 · Answer 3 · answered Jul 16 '11 at 14:48

6

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.

answered Jul 16 '11 at 14:48

Spudley

166,037
39
233
307

Depending on how you've set up the content, this may not be the best looking solution, but this is probably the easiest to implement and works surprisingly well. Thanks very much! – shmeeps Oct 26 '12 at 14:40

score 1 · Answer 4 · answered Jul 16 '11 at 14:49

1

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

answered Jul 16 '11 at 14:49

Simeon

5,519
3
29
51

5

gosh no. if you're using `inline-block`, it's because you're trying to avoid floating. – Spudley Jul 16 '11 at 14:57
1

I agree. But I think it's a relevant link to provide – Simeon Jul 16 '11 at 14:58

how to use fadeIn with display=inline-block

4 Answers4