jQueryのフェードイン（）の結果：インライン要素のブロック

Question

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

<div></div> 

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

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

あなたは結果のスパンがインラインスタイルdisplay: block;代わりにインラインを持って気づくでしょう。

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

私はディスプレイをもたらすために）（フェードインを取得するにはどうすればよい：：インライン

これは、結果のHTMLですか？

Answer 1

元のオブジェクトのクローンを作成することで、私はフェードインを呼び出すことができ、それは私にインラインスタイルを提供します。

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

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

Answer 2

私はエイドリアンです。それは本当に問題ではありませんでした。しかし、あなたは正しいです：jQueryは、要素を表示/非表示するもの（例えば、show、hide、togle、fadeOutなど）を使用すると、表示プロパティの非常に素朴な変換を行います。代わりに、本質的にそのロジックの

isShown ? '' : 'none'; 

：

彼らはこれを行う理由は、私は正直に理解したことがありません（単に表示を設定することがはるかに簡単だろう

isShown ? 'block' : 'none'; 

）しかし、彼らは彼らがしているすべてのことについての理由があるので、私は物事に間違ったディスプレイの種類を設定する背後にいくつかの論理があると思います。私が疑われるとして、jQueryの人々が彼らの理由を持っていた

*は、EDIT *

（jfriend00からのコメントを参照してください）。また、今質問に実際の質問があることがわかります。

どのように表示するには、インラインでfadeIn（）を取得しますか？

答えは、fadeInがどのように動作するかを調べる必要があることです。基本的にそれだけだ。つまり

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

、それはほぼ同等だ：

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

（警告：上記のコードは動作するはずですしばらくして、私は、実際にjQueryのアニメーション機能の大きなユーザーではありませんよ私は約束しない）。あなたが他の何か（のような'inline'を言う）に表示を設定したい場合は、あなたがすることができる、ということを考えると

：

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

Answer 3

私はちょうど同様の問題の簡単な解決策を見つけました。あなたのケースでは、修正プログラムはこのようになります：

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

Answer 4

私は（this questionからMakuraYamiのanswerに基づいて）これは非常に有用、やや簡素た：

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