How to fade to display: inline-block
You could use jQuery's animate function to change the opacity yourself, leaving the display unaffected.
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!
$("div").fadeIn().css("display","inline-block");
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