jQuery的fadeIn()方法导致内联元素显示为块级元素

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()效果呈现为display:inline？

- chovy

---

等等，问题是什么？ - Adriano Carneiro

在我看来，它看起来相当内联。 - Blender

在这个 Fiddle 中，它是一个代码块。我已经更新了问题。 - chovy

Answer 1

我刚刚找到了一个类似问题的简单解决方案。在你的情况下，修复方法如下：

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

- Shomz

Answer 2

我同意Adrian的说法，那并不是一个问题。但是你说得对：当使用任何显示/隐藏元素的功能（例如show、hide、toggle、fadeOut等）时，jQuery会对显示属性进行非常简单的翻译。

说实话，我从来没有理解过他们这么做的原因（直接将显示设置为更简单）。

isShown ? '' : 'none';

与其使用他们自己的逻辑，我们可以采用以下方式：

isShown ? 'block' : 'none';

他们对他们所做的一切都有理由，所以我想他们在设置错误的显示类型时有一些逻辑。

*编辑*

正如我所料，jQuery开发团队有他们的原因（请参见 jfriend00 的评论）; 现在问题实际上是一个问题：

如何使 fadeIn（）结果为display：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', '')
});

- machineghost

---

他们可能无法使用 isShown ? '' : 'none';，因为他们必须覆盖任何可能生效的 CSS，并且将 display 设置为 '' 将允许 CSS 生效，而不是强制显示对象。 - jfriend00

@jfriend00，它并不是“允许CSS生效”，而是用''替换现有值，这会在每个我知道的浏览器中将属性设置回其默认值（例如，对于span为inline，divs为block等），从而实现正确的显示类型。 - machineghost

@morei57 可能是这个原因，尽管个人而言，我宁愿有更多的重新流动和正确的显示类型 /耸肩 - machineghost

@machineghost - 你没有理解我的评论。设置style.display=''将其设置为默认值，这允许样式文件中指定的选择器（而不是对象的样式属性上特别设置的）中的CSS规则生效。设置style.display = 'inline'或style.display = 'block'会覆盖CSS规则，从而得到已知的结果。这里有一个区别，jQuery可能想要覆盖CSS规则以获得已知的结果。 - jfriend00

@jfriend00 好的，现在我明白你的意思了：如果有人在样式表中添加 div#whatever {display:none}，而 jQuery 使用 style.display = '' 作为其 show() 操作，则它不会在该 div 上起作用。不过，似乎 jQuery 可以简单地使用 style.display = '' 作为其显示逻辑，然后检查 if (!this.is(':visible')) style = 'block'，这样它只会覆盖显示样式，如果有人使用 .show() 在被 CSS 隐藏的元素上...但我想这可能会影响性能。 - machineghost

Answer 3

我发现这非常有用，并且相对简单（基于 MakuraYami 在 这个问题 中的 答案）：

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

- Chris Kempen

Answer 4

通过克隆原始对象，我可以调用fadeIn并获得内联样式。

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

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

- chovy