Javascript fadeIn() transition

Question

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 1

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>

Answer 2

You can use hide function in Jquery with timeout. You can checkout this page for hiding of your DOM elements with animation. http://api.jquery.com/hide/
Sample Code :

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