jQuery:当 div 在大尺寸屏幕上设置动画时，box-shadow 会闪烁

Question

我正在尝试为 div 制作动画

background: #fff;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); 
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

$("#foo").animate({"top":"0px"},{duration:800});

随着 div 的动画化，它的 box-shadow 开始闪烁 - http://jsfiddle.net/TvKqx/

有什么办法可以让动画更流畅吗？

更新:我的屏幕分辨率为 1440 X 900，我认为这就是问题所在。将屏幕分辨率切换为 1024 X 768 后，闪烁消失，动画效果很好。那么如何在大屏幕上增强 jQuery 动画呢？

Answer 1

您可以为更大的屏幕使用 CSS3 transition - DEMO

#foo {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
    top: 0;

    -webkit-transition: top .8s linear;
       -moz-transition: top .8s linear;
            transition: top .8s linear;
}