CODEWITHSUNDEEP
javascriptjquerycss
user2375807
user2375807

Reputation: 39

How do I addClass once my animation has finished?

I am trying to add a CSS class at the end of an animation. Here I have a basic animation which moves the div with class box, adds border radius and changes the background color. At the end of this I want to add a class called changecolor. Everything works except the class gets added when the div box gets clicked. 

$(document).ready(function() {
    var e = $('.box');
    e.click(function() {
        e.animate({left: '200px'}, 2000);
        e.animate({borderRadius: '100px'}, 2000);
        e.animate({backgroundColor: '#22222'}, 1000);
        e.addClass('changecolor');
    });
});

This my CSS. The changecolor div is just an example. I am not trying to achieve just a color change. I want to be able to add a different class to box at the end of my animation or maybe during the animation.

.box {
    position:absolute;
    width:100px;
    height:100px;
    background-color:#A3D900
}
.change {
    background-color:red;
}

Everything works including adding the class but I want the class to be added at the end of the animation.

Upvotes: 2

Views: 394

Answers (1)

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

Try this:

 e.animate({backgroundColor:'#22222'},1000, function() {
    e.addClass('changecolor');
    // Animation complete.
  });

Simply adding complete callback.

Demo : http://jsfiddle.net/x27Ar/1/

Upvotes: 9

Related Questions