从 display:none 到 display:block 时使用 Javascript 淡入元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16860583/
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
Fade in an element using Javascript when going from display:none to display:block
提问by EGHDK
I have a script that shows an element when a radio button is pressed. I'm trying to fade in the showing of the element so it's not so abrupt.
我有一个脚本，当按下单选按钮时显示一个元素。我试图淡入元素的显示，所以它不是那么突然。
The JS:
JS：
document.getElementById('next').style.display = 'block';
document.getElementById('next').fadeIn(1000);
This works fine except for the fade in animation. What am I doing wrong. I have tried combining both statements into one statement, and I have also tried setting the fade in before the display:block, but it doesn't show up at all. Still fairly new to JS, so I'm just trying to figure out what is possible. Thanks in advance
除了动画淡入淡出之外，这很好用。我究竟做错了什么。我尝试将两个语句合并为一个语句，并且还尝试在 display:block 之前设置淡入，但它根本不显示。对 JS 来说还是相当新的，所以我只是想弄清楚什么是可能的。提前致谢
采纳答案by rahul maindargi
There's no .fadeIn()method on DOM elements.
.fadeIn()DOM 元素没有方法。
document.getElementById('ques_2').fadeIn(1000);
You're probably seeing some jQuery or other library code. That code must run on the jQuery (or whatever) object that wraps your DOM element.
您可能会看到一些 jQuery 或其他库代码。该代码必须在包装 DOM 元素的 jQuery（或其他）对象上运行。
Another approach that will work in modern browsers would be to use a CSS3 transition. You could have the JavaScript apply a new class, and let the CSS take care of the visual effect.
另一种适用于现代浏览器的方法是使用 CSS3 过渡。您可以让 JavaScript 应用一个新类，并让 CSS 处理视觉效果。
If you did want to use a library like jQuery, you need to import it into your page. For example, put this in the headof your page:
如果您确实想使用像 jQuery 这样的库，则需要将其导入到您的页面中。例如，把它放在head你的页面中：
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Then follow the API rulesfor fetching DOM elements and calling methods.
然后按照API 规则获取 DOM 元素和调用方法。
You can either use the native DOM methods to do the fetching, or just use jQuery, which makes sense if you decided to load it.
您可以使用本机 DOM 方法进行获取，也可以仅使用 jQuery，如果您决定加载它，这很有意义。
回答by lexmihaylov
You could use CSS3 to develop this effect.
您可以使用 CSS3 来开发这种效果。
With this HTML:
使用此 HTML：
<div id='fader'></div>
and this style:
和这种风格：
#fader {
opacity:0;
-webkit-transition: opacity 2s;
-moz-transition: opacity 2s;
-o-transition: opacity 2s;
transition: opacity 2s;
}
Remove the display attribute from the style.
从样式中删除显示属性。
After that you could use JavaScript to change the style, and the effect will automatically happen:
之后你可以使用 JavaScript 来改变样式，效果会自动发生：
document.getElementById('fader').style.opacity = 1;
回答by rahul maindargi
with simple javascript you can do something like this... here i am also printing the opacity value as its being increased...
使用简单的 javascript 你可以做这样的事情......在这里我也正在打印不透明度值，因为它正在增加......
function show() {
document.getElementById('next').style.opacity = (parseFloat(document.getElementById('next').style.opacity) + 0.1);
document.getElementById('value').innerHTML = (document.getElementById('next').style.opacity);
if (document.getElementById('next').style.opacity < 1) {
setTimeout(show, 400);
}
}
function fadeIn() {
document.getElementById('next').style.opacity = 0;
document.getElementById('next').style.display = 'block';
setTimeout(show, 400);
}
fadeIn();
回答by mck89
FadeIn is a jQuery function, but you are using simple javascript. Include jQuery and use:
FadeIn 是一个 jQuery 函数，但您使用的是简单的 javascript。包含 jQuery 并使用：
$("#next").fadeIn(1000);
