Javascript jquery,显示带有淡入淡出的隐藏项目
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2992611/
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
jquery, Showing a hidden item with a fadeIn
提问by Blankman
in jquery, how can I show a hidden div, and make it fade in?
在 jquery 中,如何显示隐藏的 div,并使其淡入?
回答by Nick Craver
Just hide the element initially, ether with .hide()or style="display: none;"(or display: none;in the stylesheet). Then, just call .fadeIn(), like this:
最初只需隐藏元素,使用.hide()或style="display: none;"(或display: none;在样式表中)。然后,只需调用.fadeIn(),如下所示:
$("#elementID").fadeIn();
The .fadeIn()call automatically removes the display: nonewhen it fades the opacity to 100%, it won'tremove visibility: hidden;so don't use this, or you'll have to remove it manually.
该.fadeIn()呼叫会自动删除display: none,当它消失的不透明度为100%,它不会删除visibility: hidden;,所以不要使用它,或者你必须手动删除它。
回答by marapet
回答by Sarfraz
回答by Sean Vieira
$("selector_for_your_div").fadeIn("slow");
For your edification, documentation for all of the bundled jQuery animation effects / tools is located at:
http://api.jquery.com/category/effects/
为了您的启发,所有捆绑的 jQuery 动画效果/工具的文档位于:http:
//api.jquery.com/category/effects/
回答by cockypup
Just an extra comment to Nick Craver perfect answer:
只是对 Nick Craver 完美答案的额外评论:
If you element already has a display attribute (e.g. display:block), do not substitute that with display:none. Instead, just add an extra display attribute. Just make sure to add display:none after (under) the other display attribute. When an attribute is repeated, the last value takes precedence.
如果您的元素已经有一个显示属性(例如 display:block),不要用 display:none 替换它。相反,只需添加一个额外的显示属性。只需确保在其他显示属性之后(下)添加 display:none 。当属性重复时,最后一个值优先。
.class {
...
display:block;
display:none;
}
Your element will be initially hidden (because of the second display attribute). As soon as fadeIn() starts it will remove display:none but will not touch the first display (display:block in my example). The first display attribute will then be used to style the class while it is fading and stay put after fadeIn() is done.
您的元素最初将被隐藏(因为第二个 display 属性)。一旦fadeIn() 启动,它就会移除display:none 但不会触摸第一个显示器(在我的例子中是display:block)。然后,第一个显示属性将用于在类淡入淡出时设置样式,并在淡入()完成后保持不变。
回答by Greg Guida
*selector*.fadeIn(*speed in miliseconds*)is the function your looking for.
*selector*.fadeIn(*speed in miliseconds*)是您要找的功能。
If you want the div to retain its space when its not seen use style="opacity:0;"instead of display:none;
如果您希望 div 在未看到时保留其空间,请使用style="opacity:0;"而不是display:none;

