Question

http://jsfiddle.net/chovy/dk5Ua/

<div></div>

var $span = $('<span>foo</span>');

$span.hide();
$("div").append($span);
$span.fadeIn();

You’ll notice the resulting span has inline style display: block; instead of inline.

This is the resulting html:

<span style="display: block;">foo</span>

How do I get the fadeIn() to result in display: inline?

Answer 1

By cloning the original object I can call fadeIn and it gives me an inline style.

var $htm = $('<span/>')
, $divs = $('div');

$divs.replaceWith(function(){
   return $htm.clone().fadeIn(2000);
});