使用jquery将div动画化到页面顶部，但在Chrome中闪烁

Question

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

http://jsfiddle.net/WzhY9/

Answer 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-前缀），您可以添加其他浏览器以支持其他浏览器。

我希望这有帮助。