不透明动画应该很容易？（javascript）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8390430/
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
Opacity animation should be easy? (javascript)
提问by somdow
ok so in learning this javascript here, im wanting to create a panel in my html that when a button is clicked, whatever content is in that div, is faded out and the new content fades in...like..like for example, a jquery gallery.
好的，所以在这里学习这个 javascript，我想在我的 html 中创建一个面板，当一个按钮被点击时，该 div 中的任何内容都会淡出，而新内容会淡入......比如......比如，一个 jquery 画廊。
but since I'm learning i wanna do it myself.
但因为我正在学习，我想自己做。
that said, I'm trying to animate the opacity of a dummy div like so:
也就是说，我正在尝试为虚拟 div 的不透明度设置动画，如下所示：
var daBox = document.getElementById("box");
var hmm;
function beginAnimBox (){
daBox.style.opacity = 1;
hmm = setInterval(animBox,5000);
}
function animBox(){
if(daBox.style.opacity == "1"){
daBox.style.opacity = -0.1;
}
}
window.onload = function(){
beginAnimBox();
}
something like this as an example. logic being (dunno if it makes sense) is that every x seconds, do the code to reduce the opacity value by .1 until 0.
像这样的例子。逻辑是（不知道是否有意义）是每 x 秒，执行代码以将不透明度值降低 0.1 直到 0。
then when fully opaque, I'll write something later to bring in the new content.
然后当完全不透明时，我稍后会写一些东西来引入新的内容。
any ideas, tips, links etc.
任何想法、提示、链接等。
采纳答案by snoofkin
function animBox(){
if(daBox.style.opacity == 0){
clearInterval();
} else {
daBox.style.opacity -= 0.1;
}
}
not a JS ninja, but will probably do the trick.
不是 JS 忍者，但可能会做到这一点。
回答by Jeffrey Sweeney
Style attributes are strings, and need to be parsed as ints or floats in order to make numeric modifications.
样式属性是字符串，需要解析为整数或浮点数才能进行数值修改。
So, to gradually change the opacity, you'll need to use parseFloat(element.style.opacity).
因此，要逐渐改变不透明度，您需要使用 parseFloat(element.style.opacity)。
回答by Capt. Rochefort
Much easier solution:
更简单的解决方案：
function fade() {
var anExistingDivId = $('#divId');
anExistingDivId.fadeTo(1000, 0.1);
}
Seriously, it doesn't get much easier than that :-) The 1000 is animation length in milliseconds (so 1000 milliseconds = 1 second), the 0.1 is the 'opacity' value you want the associated div set to. It can go both ways (as in pushing the opacity up or down). This function would fade the DIV to almost completely transparent in 1 second. Nice and clean.
说真的，没有比这更容易的了:-) 1000 是以毫秒为单位的动画长度（所以 1000 毫秒 = 1 秒），0.1 是您希望关联 div 设置为的“不透明度”值。它可以双向进行（如向上或向下推动不透明度）。此功能将在 1 秒内将 DIV 淡化为几乎完全透明。漂亮干净。
回答by Fire Minded
Jeffrey Sweeny is correct. If you're having a problem with the code not processing the opacity it's because you need to convert the opacity to a number before you do any math with it. So try:
杰弗里·斯威尼是对的。如果您的代码不处理不透明度有问题，那是因为您需要在对其进行任何数学运算之前将不透明度转换为数字。所以尝试：
element.style.opacity = parseFloat(element.style.opacity) + whatever_you_want_to_increment_by;
回答by tristen
A more flexible approach would be:
更灵活的方法是：
var daBox = document.getElementById("box");
function fade(el, speed) {
setInterval(function () {
el.style.opacity -= .50;
}, speed);
}
window.onload = function(){
fade(daBox, 5000);
}
