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?
If you use css()
?
$("div").fadeIn().css("display","inline-block");
-
4I 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 todisplay: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
insteadposition:inline-block
to see if shows it first asdisplay:block
but it didn't. 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 whetherhtml
has a class ofie7
then setting.css({'display':'inline','zoom':'1'})
instead. – WNRosenberg Aug 1 '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 2 '13 at 21:04
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);
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.
-
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
According to this question in the jQuery Forums, the suggested solution is to change its ´display´ property to block
and floating it.
-
5gosh no. if you're using
inline-block
, it's because you're trying to avoid floating. – Spudley Jul 16 '11 at 14:57 -
1