jquery - Google Chrome 中使用 jQuery 的动画工件(红/蓝移)

Question

我正在尝试为具有透明背景的 DIV 制作动画。 JS 在这里 --> http://pastebin.com/fvK2FV5W

动画工作正常，但左右动画时屏幕上出现伪像(向上和向下不受影响)。

症状:

• 向左动画时，最右边的白色像素会出现红色线条。

• 当动画向右时，我会在最左边的白色像素上看到蓝色的线条。 (参见/image/2UQg6.png)

• 仅在右/左动画时发生，而不是在上/下动画时发生

• Chrome (17.0.9)、jQuery (1.7.1)、Windows 7

我以前从未见过这种情况，而且只出现在 Chrome (v 17.0.9) 中。

有什么想法可能导致这种情况吗？

---

编辑//测试:

• 当将文本的颜色从白色更改为蓝色、从白色更改为红色时 - 条纹会反射(reflect)文本的颜色。将文本设为红色...蓝线为黑色。将文本设为蓝色...红线为黑色。

• 禁用 webGL - 没有改变任何内容。

• 只有当动画移动速度低于一定速度时才会出现条纹。当将动画向右缓动时，我得到看起来像 /image/2UQg6.png 的线条

• 感谢 Beetroot-Beetroot 说这可能是我的代码过于复杂的结果。看起来这可能是问题所在，仍在测试中。

Answer 1

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

要在 jQuery 动画完成时发生某些事情，无需使用单独的 setTimeout 来预期完成；相反，指定一个“完整”回调函数。例如第一种情况可以重写如下......

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;

请注意“完成后做什么”回调函数如何作为外部两个动画的最后一个参数给出。最里面的动画没有回调。

这(多次)，加上消除不必要的换行符，将显着缩短您的代码。它将变得更具可读性，甚至可能消除 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看看代码可以简化多少。