CODEWITHSUNDEEP
jqueryhtmlcss
Dino Excel
Dino Excel

Reputation: 384

applying css rule after animation is finished jquery

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');

Upvotes: 0

Views: 312

Answers (1)

Douglas
Douglas

Reputation: 37761

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();
});

Upvotes: 2

Related Questions