applying css rule after animation is finished jquery

Question

I want to be able to add a css property\value using jquery but I want to wait until the animation has been made first then I want the css to remove the animation by setting its display value to none.

This is a snippet of my code.

**Jquery**
 $(".filled-rectangle").animate(); 
 $(".filled-rectangle").css('display', 'none');

post html code part as well, and what does your code do does it fail? — Swarne27
– Swarne27, Commented Dec 2, 2012 at 13:02

Douglas · Accepted Answer · 2012-12-02 13:07:32Z

2

You can use the .promise() and .done() methods to add actions at the end of the current animation queue:

$(".filled-rectangle").animate().promise().done(function() {
    $(".filled-rectangle").css('display', 'none');
});

This is very useful if you want to allow other code to add callbacks to be called once the animation is done, since you can return the promise returned by the .promise() method.

Or, you can add callbacks into the animation queue itself with .queue():

$(".filled-rectangle").animate().queue(function(next) {
    $(".filled-rectangle").css('display', 'none');
    next();
});

edited Dec 2, 2012 at 13:07

answered Dec 2, 2012 at 12:55

Douglas

37.8k9 gold badges80 silver badges91 bronze badges

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

3 Comments

Dino Excel Over a year ago

I mean using either of promise and queue

Douglas Over a year ago

There are examples of both on the two documentation pages I linked to, have a look at them. (The one one the promise page is quite far down.) If the examples don't make sense, I might be able to help more.

Dino Excel Over a year ago

Please do a fiddle instead. I checked it but it will not work

Collectives™ on Stack Overflow

applying css rule after animation is finished jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related