如何淡入显示：inline-block

在我的页面中，我有一堆（约30）dom节点，应该添加不可见，并在完全加载时淡入。
这些元素需要显示：内联块风格。

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

我如何使用淡入淡出function的显示值而不是inheritance？

Answer 1

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

Answer 2

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

Answer 3

为了充实Phil的好主意，下面是一个fadeIn（），它在每个元素中加载淡入淡出，然后依次转换为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 :)如果有更好的方法来做到这一点，请告诉我们！

Answer 4

我的解决办法是，Makura的回答对我不起作用

 <div id="div" style="display: none">Some content</div> $('#div').css('display', 'inline-block').hide().fadeIn(); 

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

所以div开始静态定义为display: none 。 然后，它被设置为inline-block并立即隐藏，只是褪色回到inline-block

Answer 5

根据.show()的jQuery文档 ，

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

所以我对这个问题的解决scheme是将一个CSS规则应用到类的显示：内联块的元素，然后我添加了另一个类叫“隐藏”，它适用于显示：无; 当我在元素上显示.show()时，它显示为内联。