8

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

<div></div>

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

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

結果のスパンがインラインではなくインラインスタイルになっていることに気付くでしょうdisplay: block;。

これは結果のhtmlです：

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

どうすればfadeIn（）を表示してインラインにすることができますか？

4

4 に答える 4

14

同様の問題に対する簡単な解決策を見つけました。あなたの場合、修正は次のようになります。

$span.css('display', 'inline').hide().fadeIn();
于 2013-01-27T20:21:34.903 に答える
4

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

私は正直なところ、なぜ彼らがこれを行うのか理解していません（単に表示を次のように設定する方がはるかに簡単です：

isShown ? '' : 'none';

それらのロジックの代わりに、本質的に：

isShown ? 'block' : 'none';

）しかし、彼らは彼らがすることのほとんどすべてに理由があるので、私は彼らが物事に間違った表示タイプを設定することの背後にあるいくつかの論理を持っていると思います。

* 編集 *

私が疑ったように、jQueryの人々には理由がありました（jfriend00からのコメントを参照してください）。また、質問には実際の質問があることがわかります。

どうすればfadeIn（）を表示してインラインにすることができますか？

答えは、fadeInがどのように機能するかを確認する必要があるということです。本質的にそれはただです：

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

つまり、次のようになります。

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

（警告：私は実際にはjQueryのアニメーション機能の大口ユーザーではないので、上記のコードは機能するはずですが、約束はしません）。

それを前提として、表示を他の何か（sayなど'inline'）に設定したい場合は、次のことができます。

this.animate({opacity: '100%'}, speed, easing, function() {
    this.css('display', 'inline') // or you could use this.css('display', '')
});
于 2012-11-08T01:54:12.687 に答える
2

私はこれが非常に便利で、やや単純であることがわかりました（この質問に対するMakuraYamiの回答に基づく）：

$span.fadeIn().css('display', 'inline');
于 2016-03-31T11:03:49.043 に答える
0

元のオブジェクトのクローンを作成することで、fadeInを呼び出すことができ、インラインスタイルが得られます。

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

$divs.replaceWith(function(){
   return $htm.clone().fadeIn(2000);
});
于 2012-11-10T07:11:18.997 に答える