jquery - 如何淡出显示：inline-block

Question

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

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

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

score 243 · Accepted Answer

243

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

于 2012-04-25T19:44:20.987 回答

score 40 · Accepted Answer

40

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

于 2009-07-07T09:53:51.313 回答

score 11 · Accepted Answer

只是为了充实 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 新手 :) 如果有更好的方法可以做到这一点，请告诉我们！

score 9 · Accepted Answer

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

score 2 · Accepted Answer

根据jQuery.show()文档，

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

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

score 1 · Accepted Answer

这甚至适用display:none于 css 预设。采用

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

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

在 CSS 中设置：

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

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

6 回答 6