JQuery fadeIn () leads to display: block for inline element

Question

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

<div></div> var $span = $('<span>foo</span>'); $span.hide(); $("div").append($span); $span.fadeIn(); 

You will notice that the resulting range has a built-in display: block; style display: block; instead of the built-in.

This is the result of html:

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

How to get fadeIn () to display: inline?

Answer 1

By cloning the source 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); }); 

Answer 2

I just found a simple solution to a similar problem. In your case, the fix will be as follows:

 $span.css('display', 'inline').hide().fadeIn(); 

Answer 3

I'm with Adrian; it really is not a question. But you're right: jQuery does a very naive translation of display properties when you use something that displays / hides elements (e.g. show, hide, togle, fadeOut, etc.).

I honestly never understood why they were doing this (it would be much easier to just configure the display:

 isShown ? '' : 'none'; 

instead of their logic, which is essentially:

 isShown ? 'block' : 'none'; 

), but they have reasons for almost everything that they do, so I assume that they have some logic related to the incorrect display of types of things.

* EDIT *

As I expected, jQuery people had their own reasons (see comments from jfriend00); I also see that now there is a question in the question:

How to get fadeIn () to display: inline?

The answer is that you need to see how fadeIn works; essentially it's simple:

 this.animate({opacity: "show"}, speed, easing, callback ); 

In other words, this is roughly equivalent to:

 this.animate({opacity: '100%'}, speed, easing, function() { this.css('display', 'block') }); 

(WARNING: I am not a big user of jQuery animation functions, so although the code above should work, I do not do promises).

Given that if you want to customize the display to something else (for example, 'inline' ), you can do:

 this.animate({opacity: '100%'}, speed, easing, function() { this.css('display', 'inline') // or you could use this.css('display', '') }); 

Answer 4

I found this extremely useful and somewhat simpler (based on MakuraYami's answer to this question ):

 $span.fadeIn().css('display', 'inline');