How to fade to display: inline-block How to fade to display: inline-block jquery jquery

How to fade to display: inline-block


$("div").fadeIn().css("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!