1

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.

designerNProgrammer
  • 2,621
  • 5
  • 34
  • 46
  • Can i use a dely on AddClass or RemoveClass? – designerNProgrammer Jun 06 '14 at 02:48
  • @designerNProgrammer I think `.delay()` will only work on queued jQuery things, add / remove wont be effected. A 'setTimeout()' would be needed. Add / remove class do not have a callback function for when they're complete, nor do they have a speed that delay will effect. – badAdviceGuy Jun 06 '14 at 02:51
  • @badAdviceGuy so tell me how can i fix that? please throw me an answer. – designerNProgrammer Jun 06 '14 at 02:51
  • @designerNProgrammer, http://jsfiddle.net/F4NN8/1/ something like this... Yes, you are right, delay() will not work,my fault. :) p.s. you just have to set duration (in ms) of css animation... – sinisake Jun 06 '14 at 02:58
  • you don't need a time out, animate already has a call back when it is completed. – Helmut Granda Jun 06 '14 at 03:06

3 Answers3

0

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?

Community
  • 1
  • 1
Helmut Granda
  • 4,565
  • 7
  • 35
  • 51
0

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);
badAdviceGuy
  • 2,060
  • 1
  • 16
  • 12
-1

The original doc (see it here) doesn't say anything about multiple parameters. Just one string per addClass 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).

Rafael Brasil
  • 232
  • 1
  • 6