jQuery animate() 完成回调未调用

Question

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!

Answer 1

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/

Answer 2

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

$("#some-id")

Mine was wrongfully vanilla eg

$("#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!