jQuery 动画 CSS 显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17863490/
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
Animate CSS display
提问by danyo
Is there a way to animate the CSS display property in jQuery? I have the following:
有没有办法在 jQuery 中为 CSS 显示属性设置动画？我有以下几点：
$(".maincontent").css("display","block");
and want it to do something like this:
并希望它做这样的事情：
$(".maincontent").animate({"display": "block"}, 2500);
回答by Derek Henderson
Just use .show()passing it a parameter:
只需使用.show()传递一个参数：
$(".maincontent").show(2500);
Edit (based on comments):
编辑（基于评论）：
The above code fades in the element over a 2.5 second span. If instead you want a 2.5 second delay and then want the element to display, use the following:
上面的代码在 2.5 秒的跨度内淡入元素。如果您想要 2.5 秒的延迟，然后想要显示元素，请使用以下命令：
$(".maincontent").delay(2500).fadeIn();
If, of course, you want a delay and a longer fade, just pass the number of milliseconds desired into each method.
当然，如果您想要延迟和更长的淡入淡出，只需将所需的毫秒数传递给每个方法。
回答by Charlie
You could do something like this:
你可以这样做：
$("div").css({
"opacity":"0",
"display":"block",
}).show().animate({opacity:1})
Example: http://jsfiddle.net/charlescarver/g7z6m/
示例：http: //jsfiddle.net/charlescarver/g7z6m/
This takes into account the display:none, since it will still be removed from the flow of the page until the code is invoked, where it will display it, then set it's opacity to 0. It will then animate it's opacity to 1 when you call the code.
这考虑到display:none，因为它仍然会从页面流中删除，直到调用代码，它将显示它，然后将它的不透明度设置为 0。然后当你调用代码时，它会将它的不透明度设置为 1 .
回答by Shivam
Try this (as I mentioned in comments):
试试这个（正如我在评论中提到的）：
You can use .delay()method. I.E:
您可以使用.delay()方法。IE：
$(".maincontent").delay(2500).show();
回答by Ken Seah
Animating opacity using jQuery is more viable than display property, here the opacity is animated from 0 to 1 in 1 second:
使用 jQuery 动画不透明度比 display 属性更可行，这里的不透明度在 1 秒内从 0 动画到 1：
$(".maincontent").animate({opacity:1},1000)
Then the css should be like this:
那么css应该是这样的：
.maincontent{
opacity: 0;
}
If you are planning to hide the entire block before the transistion, you could have a display property.
如果您打算在转换之前隐藏整个块，则可以使用 display 属性。
.maincontent{
opacity: 0;
display: none;
}
Then to show the block with animation:
然后用动画显示块：
$(".maincontent").show().animate({opacity:1},1000 function(){
(callback function here)
})
Hope this helps!
希望这可以帮助！
