javascript/jquery .animate() 色相旋转答案

【问题标题】：javascript/jquery .animate() hue-rotationjavascript/jquery .animate() 色相旋转
【发布时间】：2019-11-17 20:37:19
【问题描述】：

你能用 .animate() 来动画色相旋转吗？如果没有，是否有可以在此函数中设置动画的属性列表。此链接：https://api.jquery.com/animate 暗示 .animate() 只是一个 jQuery 函数，但它在我的项目上工作而不使用 jQuery。这是否已被 javascript 所吸收，以及如何通过 javascript 操作 css hue-rotate。我在 google 或 stack exchange 上都找不到很多对此的引用。

我尝试了许多 hueRotate 的组合，使其成为对象、json 并通过 `` 创建字符串文字，但它们似乎都不起作用。

    Info.style.filter = ('hueRotate:240deg;');
    Info.style.filter = `hue-rotate(240deg);`
    Info.style.filter = {(hue-rotate(240deg)};
    Info.style.filter.hueRotate = "240deg";

我已经尝试了几十种内部和外部的组合 .animate & requestAnimationFrame 但它们都不起作用。它可能真的很简单。

【问题讨论】：

Info.style.filter = 'hue-rotate(240deg);'
什么都不做......只是保持不变。
删除; ..
是的，这行得通。非常感谢你，我已经尝试了几个小时...... :)。有一个cookie
这在 .animate() 中可行吗？

标签： javascript jquery css animation hue

【解决方案1】：

是的，web animations 也可以为过滤器设置动画，就像任何可动画的 CSS 属性一样。您只需要指定初始值和最终值。

document.getElementById("box").animate(
  {
    filter: ['hue-rotate(0deg)', 'hue-rotate(360deg)']
  },
  {
    duration: 2500,
    iterations: Infinity
  }
);

#box {
  background: linear-gradient( to right, purple, orange); 
  width: 200px;
  height: 200px;
}

&lt;div id="box"&gt;&lt;/div&gt;

其实可以写成many different syntaxes...

【讨论】：