jQuery fadeIn（）导致display：block为内联元素

Question

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（）导致显示：inline？

Answer 1

我刚刚找到了解决类似问题的简单方法。在您的情况下，修复将是这样的：

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

Answer 2

我和阿德里安在一起;这真的不是一个问题。但你是对的：当你使用任何显示/隐藏元素的东西时（例如show，hide，togle，fadeOut等），jQuery会对显示属性做一个非常天真的翻译。

我老实说永远不明白为什么他们这样做（简单地将显示设置为：

isShown ? '' : 'none';

而不是他们的逻辑，基本上是：

isShown ? 'block' : 'none';

）但是他们有几乎所有事情的理由，所以我想他们在设置错误的显示类型背后有一些逻辑。

*编辑*

我怀疑，jQuery人确实有他们的理由（参见jfriend00的评论）;我也看到现在问题中存在一个实际问题：

  

如何让fadeIn（）导致显示：inline？

答案是你需要了解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

我发现这非常有用，而且更简单（基于MakuraYami的answer到this question）：

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

Answer 4

通过克隆原始对象，我可以调用fadeIn，它给我一个内联样式。

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

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