jQuery 无法在“元素”上执行“动画”：不支持部分关键帧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38376499/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Failed to execute 'animate' on 'Element': Partial keyframes are not supported
提问by Mimouni
I try to add an animation to a div using jquery :
我尝试使用 jquery 向 div 添加动画：
$('#footer').animate({ "width" : "13%" },1000);
it works but an error is displayed in the console like:
它可以工作，但控制台中显示错误，例如：
"Failed to execute 'animate' on 'Element': Partial keyframes are not supported."
“无法在‘元素’上执行‘动画’：不支持部分关键帧。”
when i click on the right link :
当我点击正确的链接时：
but when i use a value in pixel there is no error with :
但是当我在像素中使用一个值时，没有错误：
$('#footer').animate({ "width" : 68 },1000);
is there a solution to use responsive values ?
有没有使用响应值的解决方案？
回答by Joseph Rex
The problem is the way you call .animate(). You have jQuery added to your codebase but you are using the web platform's animatewith the way you have called .animate(). If you want this to work fine with jQuery change from:
问题是你打电话的方式.animate()。你的jQuery添加到您的代码库，但您使用的是网络平台的动画与已调用方式.animate()。如果您希望它与 jQuery 一起正常工作，请更改：
var player = this.move_.animate();
to
到
var player = $(this.move_).animate();
but if you'd like to use the JavaScript animate over jQuery then you can have this
但是如果你想在 jQuery 上使用 JavaScript 动画，那么你可以拥有这个
var player = this.move_.animate({transform: [parameters.transformBegin, parameters.transformEnd]});
I have no idea what your parameters are but my example shows you add the multiple key frames as an array for each property you are animating
我不知道您的参数是什么，但我的示例显示您将多个关键帧添加为您正在动画的每个属性的数组
回答by fregante
You fell into a trap. The $you are using is not jQuery, but it's a console's API, a shortcut for document.querySelector
你掉进了陷阱。在$您使用的不是jQuery的，但它是一个控制台的API，用于快捷方式document.querySelector
This means that $('#footer')does not return a jQuery object but a plain DOM element.
这意味着$('#footer')它不会返回一个 jQuery 对象，而是一个普通的 DOM 元素。
This means that .animateis not jQuery's method but the element's method, so you're unknowingly using the Web Animation API, not jQuery.animate.
这意味着这.animate不是 jQuery 的方法，而是元素的方法，因此您在不知不觉中使用了Web Animation API，而不是jQuery.animate.
They have a different API and you get the error.
他们有一个不同的 API，你会得到错误。
In short, make sure that jQuery is available on your page and/or use jQuery('#footer').animate(et cetera)
简而言之，确保 jQuery 在您的页面上可用和/或使用 jQuery('#footer').animate(et cetera)
回答by Mihai T
works fine here : jsfiddlewith no errors
在这里工作正常：jsfiddle没有错误
css :
css :
#footer {
width:100%;
height:100px;
background:red;
}
i think you get that error ( "Failed to execute 'animate' on 'Element': Partial keyframes are not supported." ) because the element you want to manipulate ( #footer)doesn't have a specific size given before the animation
我认为您会收到该错误（“无法在 'Element' 上执行 'animate'：不支持部分关键帧。”）因为您要操作的元素 ( #footer) 在动画之前没有给出特定大小
just give a width( in CSS or inline ) to #footerand should work without any errors
只需给一个width（在 CSS 或内联中），#footer并且应该可以正常工作而不会出现任何错误
let me know if it helps
让我知道它是否有帮助
