使用 JavaScript 淡化 div答案

【问题标题】：Fading Divs using JavaScript使用 JavaScript 淡化 div
【发布时间】：2014-09-04 11:32:55
【问题描述】：

大家好，我在 HTML 文档中淡出 Div 时遇到问题。我可以反转使用相同的功能，并且可以根据需要淡入 div，但不能淡出。有什么想法吗？

这里是 JavaScript 函数：

function fadeOut(node, duration) {
    var increments = 100;
    var increment_value = 1/increments;
    var interval = duration/increments;
    var opacity = 1;

    var repeater = setInterval( function() {
        if (opacity > 0) {
            opacity = opacity - increment_value;
            node.style.opacity = opacity;
        } else {
            clearInterval(repeater);
        }
    }, interval);
}

【问题讨论】：

你的 fadeIn 的代码是什么？你确定它被阻止了吗？我想说您的淡入淡出间隔很可能仍在进行，而这两个事件只是相互抵消了。你能做一个 jsfiddle 来演示这个问题吗？
顺便说一句，不需要为不透明度值使用额外的变量。并且不要忘记在最后一次迭代中将不透明度设置为零。
为什么不使用jQuery fadeIn()？
seems to be working fine.
@SyedAliTaqi 您是否建议为一小段代码使用庞大的库？我会问为什么不使用 css 过渡...

标签： javascript html fadeout effects

【解决方案1】：

您可以使用 css-transitions 淡入/淡出（换句话说：将实际淡入淡出留给浏览器）：

让我们有一个元素

<div id="fader"> fader
  <div data-dofade="1">Let us fade in/out</div>
</div>

对于这个元素，下面的css

#fader div {
    opacity: 1;
    transition: all ease-in 1s 0s;
}

#fader div.fadeout {
    opacity: 0;
    transition: all ease-out 1s 0s;
}

现在您可以使用此处理程序将 div#fader 中的 div 淡入或淡出：

document.querySelector('#fader').addEventListener(
        'click',  
        function(e){
          var fadeEl =  this.querySelector('[data-dofade]');
          fadeEl.className = /fadeout/i.test(fadeEl.className)  ? '' : 'fadeout';
        }
);

在这个jsFiddle 中随意摆弄它（也包含一个脚本推子）。

另见：css transition (MDN)

【讨论】：