无法在 'Element' 上执行 'animate'：不支持部分关键帧

Question

我尝试使用 jquery 向 div 添加动画：

$('#footer').animate({ "width" : "13%" },1000);

它有效，但控制台中显示错误，如：

"Failed to execute 'animate' on 'Element': Partial keyframes are not supported."

当我点击右边的时候link :

但是当我使用像素值时没有错误：

$('#footer').animate({ "width" : 68 },1000);

是否有使用响应值的解决方案？

Answer 1

在这里工作正常：jsfiddle 没有错误

css :

#footer {
  width:100%;
  height:100px;
  background:red;
}

我认为你得到了那个错误（"Failed to execute 'animate' on 'Element': Partial keyframes are not supported."）因为你想要操作的元素（#footer）在动画之前没有给出特定的大小

只需将 width（in CSS 或内联）提供给 #footer，应该可以正常工作

如果有帮助请告诉我

Answer 2

问题是你的调用方式.animate()。您已将 jQuery 添加到您的代码库中，但您正在使用 web platform's animate 和您调用 .animate() 的方式。如果您希望它与 jQuery 一起正常工作，请更改：

var player = this.move_.animate();

到

var player = $(this.move_).animate();

但是如果你想在 jQuery 上使用 JavaScript 动画，那么你可以使用这个

var player = this.move_.animate({transform: [parameters.transformBegin, parameters.transformEnd]});

我不知道您的参数是什么，但我的示例显示您将多个关键帧作为数组添加到每个要设置动画的属性

Answer 3

你掉进陷阱了。您使用的 $ 不是 jQuery，而是控制台的 API，document.querySelector

的快捷方式

这意味着 $('#footer') 不是 return 一个 jQuery 对象，而是一个普通的 DOM 元素。

这意味着 .animate 不是 jQuery 的方法，而是元素的方法，因此您在不知不觉中使用了 Web Animation API，而不是 jQuery.animate。

他们有不同的API，你得到了错误。

简而言之，请确保 jQuery 在您的页面上可用 and/or 使用 jQuery('#footer').animate(et cetera)

Failed to execute 'animate' on 'Element': Partial keyframes are not supported