CODEWITHSUNDEEP
javascriptjquery
MasterDroid
MasterDroid

Reputation: 1

jQuery animate() complete callback not calling

I have got the following code:

if ($newCardLoader != null) {
    $cardsContainer.animate({
        maxHeight: futureHeight + "px"
      }, 500, "ease", function() {
        $cardsContainer.classList.remove("clamp-height-large");
        $cardsContainer.classList.add("clamp-height-fit");
        console.log("done");
    });
}

The log and the style changes just don't happen. I have seen several posts on this topic and followed all of them.

To me, it seems correct. Hope somebody can help be out!

Upvotes: 0

Views: 57

Answers (2)

MasterDroid
MasterDroid

Reputation: 1

@imvain2 and @Rory McCrossan suggestions are correct. $cardsContainer needs to be a jQuery object i.e.

$("#some-id")

Mine was wrongfully vanilla e.g.

$("#some-id")[0]

This mistake does not throw errors and the animation works anyway. Only the callback does not work. This makes it hard to spot to thank you!

Upvotes: 0

Twisty
Twisty

Reputation: 30893

Consider the following.

if ($newCardLoader != null) {
  $cardsContainer.animate({
    maxHeight: futureHeight + "px"
  }, 500, "ease", function() {
     $cardsContainer.toggleClass("clamp-height-large clamp-height-fit");
     console.log("done");
  });
}

See more: https://api.jquery.com/toggleclass/

Upvotes: 1

Related Questions