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():

$(".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>