不透明度动画应该很容易吗？ （JavaScript的）

Question

好的，所以在这里学习这个javascript，我想创建一个 我的html中的面板，当单击一个按钮时，该div中的任何内容都是 淡出，新内容淡入...像...例如，一个jquery画廊。

但是因为我正在学习我想自己做。

那说，我试图像这样动画虚拟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(); 
}

像这样的例子。 逻辑存在（dunno，如果它是有意义的）是每隔x秒，执行代码将不透明度值减少.1直到0。

然后当完全不透明时，我会稍后写一些内容来引入新内容。

任何想法，提示，链接等。

Answer 1

function animBox(){
    if(daBox.style.opacity == 0){
        clearInterval();
    } else {
      daBox.style.opacity -= 0.1;
    }
}

不是JS忍者，但可能会做到这一点。

Answer 2

样式属性是字符串，需要解析为整数或浮点数才能进行数字修改。

因此，要逐渐更改不透明度，您需要使用parseFloat（element.style.opacity）。

Answer 3

更简单的解决方案：

function fade() {
    var anExistingDivId = $('#divId');
    anExistingDivId.fadeTo(1000, 0.1);
}

说真的，它没有那么容易:-) 1000是动画长度，以毫秒为单位（所以1000毫秒= 1秒），0.1是你想要关联div设置的'opacity'值。它可以双向进行（如向上或向下推动不透明度）。此功能可在1秒内将DIV淡化至几乎完全透明。很干净。

Answer 4

更灵活的方法是：

var daBox = document.getElementById("box");

function fade(el, speed) {
    setInterval(function () {
        el.style.opacity -= .50;
    }, speed);
}

window.onload = function(){
        fade(daBox, 5000); 
}

Answer 5

Jeffrey Sweeny是对的。如果你的代码没有处理不透明度的问题，那是因为你需要在使用它之前将不透明度转换为数字。所以试试：

element.style.opacity = parseFloat(element.style.opacity) + whatever_you_want_to_increment_by;