Detect end of JQuery animation

Viewed 120

I have a working Jquery animation like this:

const e = $("#span-7");
e.css({fill: "#4287f5", transition: "0.5s"});

How can I detect the end of the animation?

I tried this with no luck!

e.one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
       console.log('Animation Ended!');
});

Edit: Guys please, animate does not work for fill animation. I need to use .css animation.

1 Answers

If you use jQuery you can animate with .animate() method

.animate() method has complete callback

const e = $("#span-7");
e.animate({
  fill: "#4287f5"
}, 500, function(){
   // animation complete
})

UPD: For animate fill property you must use jQuery plugin jQuery Color

Working demo https://codepen.io/-greg-/pen/jOqMJNp

UPD: if you don't want use jQuery color plugin: Use event transitionend and webkitTransitionEnd demo

Related