Using jQuery to change CSS attributes with delay

Question

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 in i want the bg color to be red.

I tried this.

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

While fading out the div already changes the color to red before it fades in. It does not follow the sequence of chained events. How can I make this happen in one single line.

T.J. Crowder · Accepted Answer · 2013-08-26 07:27:32Z

4

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.

answered Aug 26, 2013 at 7:27

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MarsOne Over a year ago

Yes. This is what i wanted. Thanks for the explanation too

Anil kumar · Accepted Answer · 2013-08-26 07:26:05Z

2

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

answered Aug 26, 2013 at 7:26

Anil kumar

4,1774 gold badges25 silver badges37 bronze badges

2 Comments

T.J. Crowder Over a year ago

The setTimeout version was fine. This version won't delay the way the OP's code seems to want.

MarsOne Over a year ago

+1 for a good solution. However you took out my delay option. The 500ms seems to applied on the fadout now. and there is no delay :(

Collectives™ on Stack Overflow

Using jQuery to change CSS attributes with delay

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related