jquery - 如何淡出显示:inline-b

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

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

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

Boris Callens asked 2019-08-13T14:04:50Z
6个解决方案
222 votes

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

MakuraYami answered 2019-08-13T14:05:30Z
38 votes

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

philnash answered 2019-08-13T14:05:04Z
11 votes

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

Mere Development answered 2019-08-13T14:06:09Z
8 votes

Makura的回答对我不起作用,所以我的解决方案是

<div id="div" style="display: none">Some content</div>

$('#div').css('display', 'inline-block').hide().fadeIn();

div立即应用display: none但在此之前它将当前显示值保存在jQuery数据缓存中,该缓存将由后续动画调用恢复。

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

Clodoaldo Neto answered 2019-08-13T14:06:51Z
2 votes

根据.show()的jQuery文档,

如果元素的显示值为内联,则隐藏并显示,它将再次以内联方式显示。

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

amurrell answered 2019-08-13T14:07:36Z
0 votes

这甚至与css预设的display:none一起工作。 使用

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

(还有fadeIn()

使用CSS中的设置:

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

我认为这是一个解决方法,因为我相信fadeIn()应该工作,以便它只会删除最后一条规则 - display:none设置为#element{display:inline-block;display:none;},但它是故障删除两者。

Fanky answered 2019-08-13T14:08:32Z
translate from https://stackoverflow.com:/questions/1091322/how-to-fade-to-display-inline-block