时间戳

首页 > 解决方案 > 检测 JQuery 动画的结束

javascript - 检测 JQuery 动画的结束

问题描述

我有一个这样的工作 Jquery 动画：

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

如何检测动画的结束？

我试过这个没有运气！

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

编辑：伙计们，动画不适用于填充动画。我需要使用 .css 动画。

标签： javascriptjquery

解决方案

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

推荐阅读