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

window.animate

……被……遮住了

Element.prototype.animate

...最近在Web Animations 中引入：

5.21Element接口扩展

由于 DOM Elements 可能是动画的目标，因此Element 接口 [ DOM4 ] 扩展如下：

Element implements Animatable;

这允许以下类型的用法。

elem.animate({ color: 'red' }, 2000);

此行为在获取事件处理程序的当前值的第 10 步中进行了解释：

词法环境范围

1. 如果H是元素的事件处理程序，则让Scope成为 NewObjectEnvironment( document，全局环境) 的结果。

   否则，H是一个Window对象的事件处理程序：让 Scope成为全局环境。

2. 如果表单所有者不为空，则让Scope为 NewObjectEnvironment( form owner , Scope ) 的结果。

3. 如果element不为 null，则令Scope为 NewObjectEnvironment( element, Scope ) 的结果。

注意：NewObjectEnvironment() 在 ECMAScript 第 5 版第10.2.2.3节NewObjectEnvironment (O, E) 中定义

这意味着目标元素的范围会影响全局范围。

因此，您可以

• 重命名您的函数

  显示代码片段

  function animate__() {
    var div = document.getElementById('demo');
    div.style.left = "200px";
    div.style.color = "red";
  }

  #demo {
    position: absolute;
  }

  <p id='demo' onclick="animate__()">Click me</p>

• 使用window.animate（假设window没有被遮蔽）：

  <p id='demo' onclick="window.animate()">Click me</p>
  

  显示代码片段

  function animate() {
    var div = document.getElementById('demo');
    div.style.left = "200px";
    div.style.color = "red";
  }

  #demo {
    position: absolute;
  }

  <p id='demo' onclick="window.animate()">Click me</p>

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

  document.getElementById('demo').onclick = animate;
  

  显示代码片段

  function animate() {
    var div = document.getElementById('demo');
    div.style.left = "200px";
    div.style.color = "red";
  }
  document.getElementById('demo').onclick = animate;

  #demo {
    position: absolute;
  }

  <p id='demo'>Click me</p>

• 使用事件侦听器而不是事件处理程序：

  document.getElementById('demo').addEventListener('click', animate);
  

  显示代码片段

  function animate() {
    var div = document.getElementById('demo');
    div.style.left = "200px";
    div.style.color = "red";
  }
  document.getElementById('demo').addEventListener('click', animate);

  #demo {
    position: absolute;
  }

  <p id='demo'>Click me</p>

如评论中所述，修复方法是重命名该函数，因为 Chrome 似乎保留了原始名称。

element.animate()

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

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

这是原始animate函数的使用示例：

elem.animate([
    {transform: 'translateX(0px)'},
    {transform: 'translateX(100px)'}
], 3000);

我刚刚遇到了同样的问题。现在我知道 'animate' 是一个保留字之类的东西。我将函数的名称从“animate”更改为“anim”，程序运行良好。什么恶作剧！