添加课程，然后在添加课程后做一些事情

Question

Hey guys i am working on a slider where i have to add a class with transform property and once the class is added fully and the animation is complete add or remove another class. Now this is code i did but it didn't work.

    $('.backgroundImage').addClass('anim', function(){
 $('.backgroundImage').removeClass('anotherClass');

Here i am trying to add a class to .backgroundImage called anim and once is fully attached remove the second class .anotherClass the idea is to do this when one class is fully attached then only other gets removed and not simultaneously. Please tell me where i am doing wrong. thanks.

Answer 1

Add/remove the next class on the transform property not on the "addClass" function.

see samples in the jquery docs. http://api.jquery.com/animate/

if you are using CSS3 to animate then you may want to read this post:

Is there a callback on completion of a CSS3 animation?

Answer 2

Okay, if I understand your issue correctly this may help:

Demo Fiddle

So what I get is that you're using a CSS animation and want to do stuff after it's done. As far as I know the add / remove class is immediate, and there isn't an easy way to tell once a CSS animation tied to a class is complete. So you'll just have to hand code the animation time in the JS (unless someone knows a better way).

You add the first class, and then call setTimeout() on with a delay equal to your first class's animation duration. Then in the timeout you remove the old class, and add the new one. In this example I set the delay to 1 second, but it could be anything.

JS:

var animationDuration = 1000; // 1 second

$('.test').addClass('yourFirstClass');

setTimeout(function() {
    $('.test').removeClass('yourFirstClass').addClass('yourSecondClass');
}, animationDuration);

Answer 3

The original doc (see it here) doesn't say anything about multiple parameters. Just one string per call. The examples are:

$( "p" ).addClass( "myClass yourClass" );

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

As of jQuery 1.4, the .addClass() method's argument can receive a function.

$( "ul li" ).addClass(function( index ) {
    return "item-" + index;
});

So I recommend you to use the following in your code:

$('.backgroundImage').addClass('anim');
$('.backgroundImage').removeClass('anotherClass');

It seems to be just what you are doing (except for the function I removed).