Rui Rui - 29 days ago 5
HTML Question

Javascript fadeIn() transition

I have this code that switches the opacity of an image after a certain delay:

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

How can I make the transition look smooth instead of just switching the colors directly?

Answer Source

Here is a working example with animate():

    opacity: 0.4,
}, 1000);
.pattern-overlay {
    width: 200px;
    height: 200px;
<script src=""></script>
<div class="pattern-overlay"></div>