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

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

 var $span = $('foo'); $span.hide(); $("div").append($span); $span.fadeIn(); 

你会注意到结果的span有内联样式display: block; 而不是内联。

这是生成的html：

 foo 

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

 var $htm = $('') , $divs = $('div'); $divs.replaceWith(function(){ return $htm.clone().fadeIn(2000); });