如何将元素渐变为display: inline-block

Question

在我的网页中，我有大约30个dom节点应该被添加为不可见的，当它们完全加载后就会淡入显示。
这些元素需要一个display: inline-block样式。

我想使用jQuery的.fadeIn()函数。这要求元素最初具有display: none;规则以最初隐藏它。 然后在.fadeIn()之后，元素当然具有默认的display: inherit;

如何在display属性值不是inherit的情况下使用淡入功能呢？

- Boris Callens

Answer 1

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

- MakuraYami

---

这绝对是更好的答案。 - Jason

非常好的答案！更好的是，你可以将其留空，以默认使用CSS中的内容：$("div").fadeIn().css("display","");。 - Brandon Durham

这真的应该成为被接受的答案；现有的被接受的答案更像是一条评论。 - Sinister Beard

对我来说不起作用...应用于一个初始显示样式设置为none的div，使用一个类。检查元素时，我看到在调用fadeIn之后的几毫秒内，它的样式中有inline-block，然后样式被设置为block。根据Simon的建议，效果不好，因为在fadeIn期间元素以块的形式显示。 - Giox

2019年最佳解决方案 - Esteban Castro Sola

Answer 2

你可以使用jQuery的animate函数来改变透明度，不影响显示。

- philnash

---

我更喜欢这个解决方案，它可以避免在我的JS中使用CSS。 - joshuadelange

@joshuadelange 不是很准确，opacity 也是 CSS。 - Roy

+1 是为了将显示/隐藏元素的工程过程集中在应该出现的地方。 - klewis

Answer 3

为了充实Phil的好主意，这里有一个fadeIn()函数，它可以逐个加载.fadeed类的每个元素并使之淡入，转化为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新手 :) 如果有更好的方法，请告诉我们！

- Mere Development

Answer 4

我尝试了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

Answer 5

根据jQuery文档中.show()的说明：

如果一个元素的显示值是内联的，然后被隐藏并显示，它将再次以内联方式显示。

因此我解决这个问题的方法是将inline-block样式应用于该元素的类，并添加另一个名为“hide”的类，该类应用了display: none;。当我使用.show()在该元素上时，它以行内方式显示。

- amurrell

---

我认为当你设置#el{display:inline-block;display:none;}并运行$('#el').fadeIn();时，它也应该起作用，使其变成inline-block。但事实并非如此。 - Fanky

Answer 6

这个功能即使被CSS设置为display:none也可以正常工作。使用：

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

(and also $('#element').fadeOut().removeClass('displaytype');) 的意思是在 CSS 中设置完成后执行。

CSS 中的设置如下：

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

我认为这是一种解决方法，因为我相信fadeIn()应该按照预期工作，即在设置为#element{display:inline-block;display:none;}时只删除最后一个规则 - display:none，但它却错误地删除了两个规则。

- Fanky