jQuery fadeIn（）结果显示：内联元素的块

---

如何使fadeIn（）生成display:inline？

我和Adrian在一起；这真的不是一个问题。但是您是正确的：当您使用任何显示/隐藏元素的东西（例如，显示、隐藏、切换、淡出等）时，jQuery会对显示属性进行非常简单的转换

老实说，我一直不明白他们为什么这么做（简单地将display设置为：

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', '')
});

---

通过克隆原始对象，我可以调用fadeIn，它为我提供了一种内联样式

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

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

var$htm=$（“”）
，$divs=$（'div'）；
$divs.replaceWith（函数（）{
返回$htm.clone（）.fadeIn（2000）；
});

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

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

---

我发现这非常有用，而且比较简单（基于的）：

---

等等，又是什么问题？我觉得很内联。在小提琴中，是方块。我更新了问题。他们可能不能使用

isShown？''：'没有",

因为它们必须覆盖任何可能生效的CSS，并将display设置为

'

将允许CSS生效，而不是强制显示对象。我想这是因为作为流的一部分的内联元素在更改其显示属性时会造成更大的中断，当他们迫使周围的一切回流时？我想您可以在元素上设置rgba（）更改的动画，但这也不是所有浏览器都能很好地支持的。@jfriend00它并不“允许CSS生效”；它用

'

替换现有的任何值，这（在我所知道的每个浏览器中）将属性设置回其默认值（这将是正确的

显示类型，例如，内联用于跨度，块用于div等）。@morei57这可能是原因，虽然就我个人而言，我更希望有一些回流和正确的显示类型/shrug@machineghost-你不明白我的评论。设置
style.display=''
将其设置为默认值，这允许选择器指定的样式文件中的CSS规则（不是专门针对对象的样式属性设置的）生效。设置
style.display='inline'
或
style.display='block'
将覆盖提供已知结果的CSS规则。这是有区别的，jQuery可能希望覆盖CSS规则以获得已知的结果。
var $htm = $('<span/>')
, $divs = $('div');

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

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

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