How to fade to display: inline-block
JqueryFadeJquery Problem Overview
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?
Jquery Solutions
Solution 1 - Jquery
$("div").fadeIn().css("display","inline-block");
Solution 2 - Jquery
You could use jQuery's animate function to change the opacity yourself, leaving the display unaffected.
Solution 3 - Jquery
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!
Solution 4 - Jquery
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
Solution 5 - Jquery
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.
Solution 6 - Jquery
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.