jquery - 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

您可以将 CSS3transition用于更大的屏幕 - 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;
}