javascript - 使用 JavaScript 淡化 Div

Question

大家好，我在淡出 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);
}

Answer 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)