Question

我试图用透明背景动画DIV。 JS在这里 - ＆gt; http://pastebin.com/fvK2FV5W

动画效果很好，但是当左右动画时（屏幕上下都不受影响），屏幕上会出现瑕疵。

症状：

当向左设置动画时，我会从最右边的白色像素中划出红线。
当向右设置动画时，我会从最左边的白色像素上划出蓝色条纹。（见http://i.imgur.com/7Q6rp.png）
仅在向右/向左动画，而不是向上/向下动画
Chrome（17.0.9），jQuery（1.7.1），Windows 7

我以前从未见过这种情况，而且只发生在Chrome中（第17.0.9节）。

关于可能导致这种情况的任何想法？

编辑//测试：

将文本颜色从白色更改为蓝色，白色更改为红色时，条纹会反映文本的颜色。使文字变红...蓝线是黑色的。将文字设为蓝色......红线为黑色。
已禁用的webGL - 没有更改任何内容。
仅当动画移动速度低于特定速度时才会出现条纹。当向右移动动画时，我得到的行看起来像http://i.imgur.com/7Q6rp.png
感谢Beetroot-Beetroot说它可能是我的代码过于复杂的结果。看起来这可能是问题，仍然在测试。

Answer 1

Circusdei，您当前的代码比它需要的更复杂。在你做其他任何事情之前，请先了解一下jQuery完成回调和动画链 - 请参阅animate() in the jQuery documentation。

为了在jQuery动画完成时发生某些事情，没有必要通过单独的setTimeout来预测完成;相反，指定一个＆＃34;完成＆＃34;回调函数。例如，第一种情况可以改写如下......

的javascript：

case "top":
    slide.animate({top: verticalGutter+'px'}, slideTimeIn, 'easeInOutQuad', function(){
        slide.animate({top: (verticalGutter+extraSlide)+'px'}, slideTimeFloat, 'easeOutQuint', function(){
            slide.animate({
                top: (viewportHeight-slideHeight)+'px',
                opacity: 0
            }, slideTimeOut);
        });
    });
break;

注意＆＃34;完成后该怎么做＆＃34;回调函数作为外部两个动画的最后一个参数给出。最里面的动画没有回调。

这个（几次结束），以及消除不必要的换行符，将显着缩短您的代码。它将变得更具可读性，甚至可以摆脱Chrome中令人讨厌的红/蓝线神器。

编辑：实际上它可以更简单。由于顺序动画的主题在所有三种情况下都是相同的，因此jQuery允许您按如下方式建立动画链：

的javascript：

case "top":
    slide.animate({
        top: verticalGutter+'px'
    }, slideTimeIn, 'easeInOutQuad').animate({
        top: (verticalGutter+extraSlide)+'px'
    }, slideTimeFloat, 'easeOutQuint').animate({
        top: (viewportHeight-slideHeight)+'px',
        opacity: 0
    }, slideTimeOut);
break;

编辑2：请参阅http://pastebin.com/aHxUsL78，了解代码可以简化的程度。

Answer 2

请参阅accepted stackoverflow answer here.

简而言之：为受影响的元素添加1px的左或右填充为我解决了问题！与webkit中的字体重绘/渲染故障有关。

使用Google Chrome中的jQuery动画工件（红色/蓝色移位）

2 个答案: