Javascript fadeIn() 过渡

Question

我有这段代码，可以在一定的延迟后切换图像的不透明度:

$(".pattern-overlay").css("background","black").delay(2000).queue(function() {
    $(this).css("background", "rgba(0, 0, 0, 0.4)").dequeue();
});

如何使过渡看起来平滑，而不是直接切换颜色？

Answer 1

这是一个使用 animate() 的工作示例:

$(".pattern-overlay").css("background","black").delay(2000).animate({
    opacity: 0.4,
}, 1000);

.pattern-overlay {
    width: 200px;
    height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pattern-overlay"></div>