如何淡出显示：inline-block答案

【问题标题】：How to fade to display: inline-block如何淡出显示：inline-block
【发布时间】：2010-11-08 15:29:10
【问题描述】：

在我的页面中，我有一堆（大约 30 个）dom 节点，它们应该被添加为不可见的，并在它们完全加载时淡入。
元素需要 display: inline-block 样式。

我想使用 jquery .fadeIn() 函数。这要求元素最初有一个 display: none;规则最初隐藏它。在fadeIn() 之后的元素当然有默认显示：inherit;

如何将淡入淡出功能与继承以外的显示值一起使用？

【问题讨论】：

【解决方案1】：

即使使用 css 预设的 display:none 也可以。使用

$('#element').fadeIn().addClass('displaytype');

（还有$('#element').fadeOut().removeClass('displaytype');）

在 CSS 中设置：

#element.displaytype{display:inline-block;}

我认为这是一种解决方法，因为我相信 fadeIn() 应该可以工作，这样它就会删除最后一条规则 - display:none 当设置为 #element{display:inline-block;display:none;} 时，但它会错误地删除这两个规则。

【讨论】：

【解决方案2】：

根据jQuery docs为.show()，

如果一个元素的显示值为inline，然后被隐藏并显示，它将再次被显示为inline。

所以我对这个问题的解决方案是对类 display: inline-block 应用 css 规则，然后我添加了另一个名为“hide”的类，它应用 display: none;当我在元素上.show() 时，它显示为内联。

【讨论】：

我认为当你设置 #el{display:inline-block;display:none;} 然后运行 $('#el').fadeIn(); 你得到内联块时，这也应该工作。但事实并非如此。

【解决方案3】：

Makura 的回答对我不起作用，所以我的解决方案是

<div id="div" style="display: none">Some content</div>

$('#div').css('display', 'inline-block').hide().fadeIn();

hide 立即应用display: none，但在此之前它将当前显示值保存在 jQuery 数据缓存中，该缓存将由后续动画调用恢复。

所以div 开始静态定义为display: none。然后将其设置为inline-block 并立即隐藏以淡入inline-block

【讨论】：

【解决方案4】：

$("div").fadeIn().css("display","inline-block");

【讨论】：

这绝对是更好的答案。
很好的答案！更好的是，您可以将其留空以默认为 CSS 中的任何内容：$("div").fadeIn().css("display","");
这确实应该是公认的答案；现有接受的答案更多的是评论。
$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); }); 确保在淡入完成时 display:inline-block 完成
它对我不起作用...应用于 div，其初始显示样式设置为 none 使用类。检查元素我看到几毫秒，在调用fadeIn之后，它的样式中有inline-block，然后样式设置为block。西蒙建议效果不好，因为在fadeIn期间元素显示为块

【解决方案5】：

为了充实 Phil 的好主意，这里有一个 fadeIn()，它在每个元素中加载淡入淡出，依次使用 .faded 类，转换为 animate()：

旧：

$(".faded").each(function(i) {
    $(this).delay(i * 300).fadeIn();
});

新：

$(".faded").each(function(i) {
    $(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500);
});

希望能帮助像我这样的另一个 jQuery 新手 :) 如果有更好的方法，请告诉我们！

【讨论】：

【解决方案6】：

您可以使用 jQuery 的 animate 函数自己更改不透明度，而不影响显示。

【讨论】：