如何淡化显示：内联块

98

在我的页面中，我有一堆（大约30个）dom节点，应将其添加为不可见，并在完全加载时淡入。
元素需要显示：内联块样式。

我想使用jquery .fadeIn（）函数。这要求元素最初具有显示：none; 最初隐藏它的规则。在fadeIn（）之后，偏离路线的元素具有默认显示：Inherit;

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

jquery fade

— 鲍里斯·卡伦斯
source

39

您可以使用jQuery的动画功能自行更改不透明度，而不会影响显示。

— 菲纳什
source

我更喜欢此解决方案，将CSS保留在JS之外。

— joshuadelange

14

@joshuadelange不是真的，不透明度也是CSS

— Roy

+1用于将显示/隐藏要素的工程过程重点放在应该位于的位置。

— klewis 2014年

233

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

— 真仓弥
source

5

这绝对是更好的答案。

— 杰森

25

好答案！更好的是，您可以将其保留为空，以默认使用CSS中的任何内容：$("div").fadeIn().css("display","");

— Brandon Durham 2014年

1

这确实应该是公认的答案。现有的公认答案更多是评论。

— 险恶胡须2015年

$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });确保在淡入完成时完成display：inline-block

— Simon

它对我不起作用...应用于div，使用类将初始显示样式设置为none。检查该元素，我看到在调用fadeIn之后的几毫秒内，它的样式具有inline-block，然后将style设置为block。与西蒙（Simon）建议效果不佳，因为在fadeIn期间该元素显示为块

— Giox

11

只是为了充实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 newb有所帮助：）如果有更好的方法，请告诉我们！

— 仅开发
source

9

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

— Clodoaldo Neto
source

2

按照jQuery的文档的.show()，

如果元素的显示值为inline，则将其隐藏并显示，它将再次以inline显示。

因此，我对这个问题的解决方案是将CSS规则应用于类显示：元素上的inline-block，然后添加了另一个名为“ hide”的类，该类适用于显示：none; 当我.show()在元素上时，它显示为内联。

— 阿穆雷尔
source

我认为这在您设置#el{display:inline-block;display:none;}并运行$('#el').fadeIn();inline-block 时也应该起作用。但事实并非如此。

— Fanky

0

即使使用display:noneCSS预设也可以使用。用

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

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

在CSS中进行设置：

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

我认为这是一种变通方法，因为我认为fadeIn()应该起作用，这样它才可以删除最后一个规则- display:none设置为时，#element{display:inline-block;display:none;}但会错误地删除这两个规则。

— 范基
source