如何淡入显示：内嵌块

在我的页面中，我有一堆应该添加不可见的DOM节点（大约30个），并在完全加载时淡入。
这些元素需要显示：内嵌块样式。如何淡入显示：内嵌块

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

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

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

2009-07-07 09:53:51 philnash

我更喜欢这个解决方案，保持CSS我的JS。 – joshuadelange 2013-07-17 15:30:28

+10

@joshuadelange不是真的，不透明度也是CSS – Roy 2014-02-10 22:13:53

+1，用于将显示/隐藏元素的工程过程集中到应该在的位置。 – blackhawk 2014-05-15 20:17:59

只是为了充实菲尔的好主意，这里是一个淡入（）加载淡入与转.faded类中的每个元素，转化为动画（）：

老：

$(".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福利局像我一样:) 如果有更好的方法来做到这一点，请告诉我们！

2011-11-19 10:30:12

202

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

2012-04-25 19:44:20 MakuraYami

按照jQuery docs为.show()，

如果一个元素具有内嵌的显示值，则隐藏和示出，但是将再次被显示的内联。

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

2013-08-05 18:13:46 amurrell

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

2014-01-27 16:55:43

即使用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;}时，但它故障地删除两者。

2018-01-23 12:34:55 Fanky

回答