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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 02:49:42  来源:igfitidea点击:

jquery, Showing a hidden item with a fadeIn

javascriptjquery

提问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

Use fadeIn():

使用淡入()

$('#hiddendiv').fadeIn();

You may change the duration of the fadein:

您可以更改淡入淡出的持续时间:

$('#hiddendiv').fadeIn(1000); // 1000 ms

回答by Sarfraz

Use fadeIn

fadeIn

$("selector").fadeIn();

Display the matched elements by fading them to opaque.

通过将它们淡化为不透明来显示匹配的元素。

To hide it back anytime, you can use:

要随时隐藏它,您可以使用:

Note that you should initially hide it using css or jquery.

请注意,您最初应该使用 css 或 jquery 隐藏它。

fadeOut

fadeOut

回答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/

See:Jquery Documentation for fadeIn()

请参阅:Jquery 文档fadeIn()

回答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;