jquery - jQuery fadeIn() 结果显示：内联元素的块

Question

<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？

score 14 · Accepted Answer

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

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

score 4 · Accepted Answer

我和阿德里安在一起；这真的不是一个问题。但你是对的：当你使用任何显示/隐藏元素的东西（例如显示、隐藏、切换、淡出等）时，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 动画功能的大用户，所以虽然上面的代码应该可以工作，但我不做任何承诺）。

鉴于此，如果您想将显示设置为其他内容（例如 say 'inline'），您可以执行以下操作：

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

score 2 · Accepted Answer

我发现这非常有用，而且有点简单（基于MakuraYami对这个问题的回答）：

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

score 0 · Accepted Answer

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

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

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

4 回答 4