名为“animate”的JS函数在Chrome中不起作用，但在IE中起作用

Question

这行不通，什么都没发生。我该怎么做，我做错了什么？

函数animate（）{var div=文档.getElementById（'demo'）；div.style.left=“200px”；div.style.color=“红色”；}

#演示{位置：绝对；}

<p id='demo'onclick=“animate（）”>洛洛</p>

Answer 1

问题是，由于您使用事件处理程序内容属性，您的全局函数。。。

窗口.动画

…被…遮住了。。。

元素.原型.动画

……最近于年推出Web动画:

5.21扩展元素接口

由于DOM元素可能是动画的目标元素接口[DOM4公司]扩展如下：

元素实现Animatable；

这允许以下类型的使用。

elem.animate（{color:'red'}，2000）；

此行为在中进行了解释步骤10属于获取事件处理程序的当前值:

词汇环境范围

1. 如果H（H）是元素的事件处理程序，然后让范围是NewObjectEnvironment的结果(文件，的全球环境).

   否则，H（H）是一个窗口对象的事件处理程序：让范围成为全球环境.

2. 如果表单所有者不为空，让范围是NewObjectEnvironment的结果(表单所有者,范围).

3. 如果要素不为null，let范围是NewObjectEnvironment的结果(元素，范围).

注：NewObjectEnvironment（）在ECMAScript版本5部分中定义10.2.2.3新对象环境（O，E）

这意味着目标元素的范围会遮住全局范围。

因此，您可以

• 重命名函数

  函数animate__（）{var div=文档.getElementById（'demo'）；div.style.left=“200px”；div.style.color=“红色”；}

  #演示{位置：绝对；}

  单击我</p>

• 使用窗口.动画（假设窗口没有阴影）：

  单击我</p>

  函数animate（）{var div=文档.getElementById（'demo'）；div.style.left=“200px”；div.style.color=“红色”；}

  #演示{位置：绝对；}

  单击我</p>

• 使用事件处理程序IDL属性而不是内容属性一:

  document.getElementById（'demo'）.onclick=动画；

  函数animate（）{var div=文档.getElementById（'demo'）；div.style.left=“200px”；div.style.color=“红色”；}document.getElementById（'demo'）.onclick=动画；

  #演示{位置：绝对；}

  单击我</p>

• 使用事件监听器而不是事件处理程序:

  document.getElementById（'demo'）.addEventListener（'click'，animate）；

  函数动画（）{var div=文档.getElementById（'demo'）；div.style.left=“200px”；div.style.color=“红色”；}document.getElementById（'demo'）.addEventListener（'click'，animate）；

  #演示{位置：绝对；}

  单击我</p>

Answer 2

正如评论中提到的，修复方法是重命名该函数，因为Chrome似乎保留了原来的名称。

元素.animate（）

即将推出的Web动画JavaScript API允许您从脚本中动画Web内容。今天Beta版中包含的element.animate（）函数是Chrome中提供的API的第一部分：它可以使用JavaScript创建简单的CSS动画。这意味着可以动态生成动画，而无需支付CSS样式的重新计算成本。以这种方式创建的动画也可以取消，并提供有保证的结束事件（相反，CSS转换仅在导致样式更改时生成事件）。

http://blog.chromium.org/2014/05/chrome-36-beta-elementanimate-html.html

这是原始的用法示例使有生气功能：

元素动画([{转换：“translateX（0px）”}，{转换：“translateX（100px）”}], 3000);

Answer 3

我也遇到了同样的问题。现在我知道“animate”是一个保留字或什么的。我把函数的名称从“animate”改为“anim”，程序运行得很好。真是个恶作剧！