jquery 动画不透明度与显示：无
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6485813/
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 animate opacity vs display:none
提问by Katy
If a element has a display:none on it in the CSS, then animating the opacity from 0 to 1 in jQuery doesn't make the element visible.
如果一个元素在 CSS 中具有 display:none ，则在 jQuery 中将不透明度从 0 设置为 1 不会使该元素可见。
why?
为什么？
what do I need to add in animate() to make it visible?
我需要在 animate() 中添加什么才能使其可见？
el.css({
opacity: 0,
left: - 200
}).stop().animate({
opacity: 1,
left: 0
}, {
duration: 333
});
回答by user113716
You'd need to show it first using the show()[docs]method.
您需要先使用show()[docs]方法显示它。
If your element isn't already at opacity 0, then you'd probably want to set that first:
如果您的元素尚未处于不透明度 0，那么您可能希望先设置它：
.css('opacity',0).show().animate({opacity:1});
Example:http://jsfiddle.net/DnE7M/1/
示例：http : //jsfiddle.net/DnE7M/1/
Or you could just use the fadeIn()[docs]method, which should take care of the displayas well.
或者你可以只使用fadeIn()[docs]方法，它也应该处理display。
Example:http://jsfiddle.net/DnE7M/
示例：http : //jsfiddle.net/DnE7M/
EDIT:To make it relevant to the code added to the question:
编辑：为了使其与添加到问题中的代码相关：
el.css({
opacity: 0,
left: - 200
})
.stop()
.show() // <-- make the element able to be displayed
.animate({
opacity: 1,
left: 0
}, {
duration: 333
});
You could also do it right in the call to the css()[docs]method:
您也可以在调用css()[docs]方法时正确执行此操作：
el.css({
opacity: 0,
display: 'block', // <-- 'block' or whatever is appropriate for you
left: - 200
})
.stop()
.animate({
opacity: 1,
left: 0
}, {
duration: 333
});
