如何淡化显示:内联块

Question

在我的页面中,我有一堆(大约30个)dom节点应该被添加为不可见,并在它们完全加载时淡入.
元素需要显示:内联块样式.

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

如何使用除继承之外的显示值的淡入淡出功能？

Answer 1

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

Answer 2

您可以使用jQuery的animate函数自行更改不透明度,使显示不受影响.

Answer 3

只是为了充实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 :)如果有更好的方法,请告诉我们!

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