Question

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

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

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

Answer 1

以下是animate()的工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以在Jquery中使用hide函数和timeout。您可以通过此页面查看隐藏带动画的DOM元素。 http://api.jquery.com/hide/
示例代码：

$("#yourElementId").hide("slow");