Callback function not working with css library

Question

I have this simple part of code where callback function is not working:

$(document).ready(function() { 
    $(".target:nth-child(3)").addClass("animated shake",function(){
      $("body").addClass("animated hinge")
    });
  });

first function works just fine ( elements are shaking) but nothing happens after that.

I'm also using this css library: https://github.com/daneden/animate.css/blob/master/animate.css

According to the documentation, .addClass() doesn't accept a callback function as a second argument. (It does optionally accept one as its only argument, but not for the purpose you are trying to use it for.) — nnnnnn
– nnnnnn, Commented May 19, 2017 at 7:45
Only the jQueryUI version of the addClass() function only accepts a callback parameter - not the plain jQuery version: api.jqueryui.com/addClass — Rory McCrossan
– Rory McCrossan, Commented May 19, 2017 at 7:46

Deepak · Accepted Answer · 2017-05-19 07:46:24Z

1

You don't need a callback function in this case as the Jquery AddClass is not a asnychronous method i.e. the next statement will be executed only once addClass is executed.

This should simply work in your case:

$(".target:nth-child(3)").addClass("animated shake");
  $("body").addClass("animated hinge")

answered May 19, 2017 at 7:46

Deepak

8805 silver badges13 bronze badges

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

9 Comments

nnnnnn Over a year ago

So if the first CSS class has some associated (non-JS) animation, will the second one be added before or after that animation completes?

Deepak Over a year ago

Implicitly, it doesn't know about non-js animations. You'll have to handle that thing yourself using setTimeout function.

Pawel Over a year ago

@DJYadav thanks for your answer. I've just tested your solution and it looks like both functions are executed simultaneously, not one after another ( which is what I'm aiming to achieve)

nnnnnn Over a year ago

@Pawel - It would help if you edited your question to more clearly explain that adding the first class causes CSS-based animation and that you want to wait for that to complete before adding the other class. (If indeed that is what you are trying to do.)

Deepak Over a year ago

For this kind of thing, yes the only possibility is setTimeout.

|

Collectives™ on Stack Overflow

Callback function not working with css library

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related