调用jQuery animate方法时complete回调函数不执行如何解决？

你代码里调用的是浏览器原生Web Animations API提供的animate方法，该方法的配置参数不支持complete字段，所以回调不会触发，很多开发者容易把它和jQuery的animate方法用法搞混。

解决方法 #

方案1：使用原生API的finish事件监听 #

原生animate方法调用后会返回一个Animation实例，绑定finish事件即可实现动画结束回调逻辑，正确写法如下：

var right = document.getElementById("right-container");
right.animate({
    backgroundColor: '#fff'
}, {
    duration: 550
}).onfinish = function () {
    alert('hello')
};

你也可以用标准事件监听的方式绑定：

const animation = right.animate({backgroundColor: '#fff'}, {duration: 550});
animation.addEventListener('finish', () => {
  alert('hello');
});

方案2：切换为jQuery的animate方法 #

如果你原本就是想使用jQuery的动画能力，需要先将DOM元素转为jQuery对象再调用，同时注意：jQuery原生不支持颜色属性过渡，需要额外引入jQuery.color或jQuery UI插件才能生效，写法如下：

// 需先引入jQuery及颜色动画相关插件
$('#right-container').animate({
    backgroundColor: '#fff'
}, 550, function () {
    alert('hello')
});

内容的提问来源于stack exchange，提问作者pTinosq