Home >Web Front-end >CSS Tutorial >Why Does My JavaScript `animate()` Function Break in Chrome's Web Animations?
JS Function animate May Break in Chrome Due to Web Animations
This JavaScript code attempts to animate an HTML element named "demo" by changing its position and color. However, it fails to work in Chrome.
function animate() { var div = document.getElementById('demo'); div.style.left = "200px"; div.style.color = "red"; }
The Problem
In Chrome, the issue lies with the global function animate() being overridden by a newly introduced method on the Element prototype in Web Animations. This means the global function is no longer accessible within the scope of the event handler.
The Solution
To address this problem, consider the following options:
function animate__() { // ... same code as above ... }
document.getElementById('demo').onclick = animate.bind(this);
document.getElementById('demo').animate([ { left: "200px" }, { color: "red" } ], 2000);
The above is the detailed content of Why Does My JavaScript `animate()` Function Break in Chrome's Web Animations?. For more information, please follow other related articles on the PHP Chinese website!