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 in或out中的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)

使用JavaScript淡化Div

1 个答案: