如何淡化显示：内联块

Question

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

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

如何使用除了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

Answer 5

根据.show()的{​​{3}}，

  

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

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

Answer 6

即使使用css预设的display:none也可以。使用

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

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

在CSS中设置：

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

我认为这是一种解决方法，因为我认为fadeIn()应该可以正常工作，以便在设置为display:none时删除最后一条规则#element{display:inline-block;display:none;}，但它会故障排除两者。