jQuery 如何淡入淡出显示：inline-block
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1091322/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fade to display: inline-block
提问by Boris Callens
In my page I have a bunch (about 30) dom nodes that should be added invisible, and fade in when they are fully loaded.
The elements need a display: inline-block style.
在我的页面中，我有一堆（大约 30 个）dom 节点，它们应该被添加为不可见的，并在它们完全加载时淡入。
元素需要 display: inline-block 样式。
I would like to use the jquery .fadeIn() function. This requires that the element initially has a display: none; rule to initially hide it. After the fadeIn() the elements off course have the default display: inherit;
我想使用 jquery .fadeIn() 函数。这要求元素最初具有 display: none; 规则最初隐藏它。在fadeIn() 之后，元素off 当然有默认显示：inherit;
How can I use the fade functionality with a display value other than inherit?
如何将淡入淡出功能与继承以外的显示值一起使用？
采纳答案by philnash
回答by MakuraYami
$("div").fadeIn().css("display","inline-block");
$("div").fadeIn().css("display","inline-block");
回答by Mere Development
Just to flesh out Phil's good idea, here is a fadeIn() that loads fades in each element with the class .faded in turn, converted to animate() :
只是为了充实 Phil 的好主意，这里是一个fadeIn()，它在每个元素中依次加载 .faded 类的淡入淡出，转换为 animate() ：
Old:
老的：
$(".faded").each(function(i) {
$(this).delay(i * 300).fadeIn();
});
New:
新的：
$(".faded").each(function(i) {
$(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500);
});
Hope that help another jQuery newb like myself :) If there's a better way to do that, please tell us!
希望能帮助像我这样的另一个 jQuery 新手 :) 如果有更好的方法来做到这一点，请告诉我们！
回答by Clodoaldo Neto
Makura's answer did not work for me so my solution was
Makura 的回答对我不起作用，所以我的解决方案是
<div id="div" style="display: none">Some content</div>
$('#div').css('display', 'inline-block').hide().fadeIn();
hideimmediately applies display: nonebut before that it saves the current display value in the jQuery data cache which will be restored by the subsequent animation calls.
hide立即应用，display: none但在此之前，它将当前显示值保存在 jQuery 数据缓存中，该缓存将被后续动画调用恢复。
So the divstarts statically defined as display: none. Then it is set to inline-blockand immediately hidden just to be faded in back to inline-block
所以div开始静态定义为display: none. 然后它被设置为inline-block并立即隐藏只是为了淡入inline-block
回答by amurrell
According to the jQuery docsfor .show(),
按照jQuery的文档的.show()，
If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
如果一个元素的显示值为 inline ，然后隐藏并显示，它将再次内联显示。
So my solution to this problem was to apply a css rule to a class display: inline-block on the element, then I added another class called "hide" which applies display: none; When I .show()on the element, it showed inline.
所以我对这个问题的解决方案是将 css 规则应用于类 display: inline-block 在元素上，然后我添加了另一个名为“hide”的类，它应用了 display: none; 当我.show()在元素上时，它显示为内联。
回答by Fanky
This works even with display:nonepreset by css. Use
这甚至适用display:none于 css 预设。用
$('#element').fadeIn().addClass('displaytype');
(and also $('#element').fadeOut().removeClass('displaytype');)
（还有$('#element').fadeOut().removeClass('displaytype');）
with setup in CSS:
在 CSS 中设置：
#element.displaytype{display:inline-block;}
I consider this a workaround as I believe fadeIn()should work so that it would just remove the last rule - display:nonewhen set to #element{display:inline-block;display:none;}but it is malfunctioningly removing both.
我认为这是一种解决方法，因为我认为fadeIn()应该可行，因此它只会删除最后一条规则 -display:none当设置为时，#element{display:inline-block;display:none;}但它会错误地删除这两个规则。
