Using Jquery To Change Css Attributes With Delay

How can i use jQuery to change the CSS attributes of a HTML element with delay. Imagine this scenario. I have a div with bg color blue. I want it to fade out and when it fades back

Solution 1:

You can have any function participate in the animation queue using the queue function:

$("div")
    .fadeOut()
    .delay(500)
    .queue(function() {
        $(this).css("background-color","red").dequeue();
    })
    .fadeIn();

Note the dequeue call within the callback, which is what tells jQuery to continue with the next thing in the queue.

Solution 2:

$("div").fadeOut(500, function() {
    $("div").css("background-color","red").fadeIn()
});