使用 jquery 将 div 设置为页面顶部的动画，但它在 Chrome 中闪烁答案

【问题标题】：Using jquery to animate a div to the top a page, but it flickers in Chrome使用 jquery 将 div 设置为页面顶部的动画，但它在 Chrome 中闪烁
【发布时间】：2014-05-18 02:59:29
【问题描述】：

我正在使用 jquery 将 div 设置为页面顶部的动画，但由于某种原因，它在 chrome 中查看时会闪烁非常糟糕。这是我的意思的一个过于简化的版本。有什么办法可以避免这种闪烁？

http://jsfiddle.net/WzhY9/

【问题讨论】：

不确定如何处理闪烁，但您可以链接动画以使您的代码更简单：$("#load_bar").animate({right: 0},1000).animate({top: 0},1000);。不需要对同一对象上的连续动画使用完成函数。
Roeland，我在 Chrome 上测试过，运行完美，没有闪烁。但是，您可以在另一台计算机上尝试。由于纯粹是经验性的，因此没有发布答案，但是我曾经遇到过这个问题，而且只是我的浏览器，它在另一台机器上运行良好。

标签： javascript jquery html css google-chrome

【解决方案1】：

我运行了您提供的示例，但它不会闪烁，但建议您可以在 load_bar 元素上强制硬件加速。

#load_bar { 
    height:10px; 
    position:absolute;
    background:black; 
    right: 0; 
    top: 400px; 
    width: 300px;

    /* Force hardware acceleration */
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;

}

请注意，这仅适用于 webkit 浏览器（因为 -webkit- 前缀）您可以添加其他浏览器以支持其他浏览器。

我希望这会有所帮助。

【讨论】：