使用jQuery平滑过渡滚动图像

Question

当我滚动时，我在转换图像时遇到了一些问题。

出于某种原因，当图像被第二个替换时，它首先以奇怪的透明度淡出，然后转换，不知道如何解释它，所以我创建了一个演示。

有人可以解释如何做到这样，颜色过渡顺利，没有怪异的闪烁？

html {
background-image:url(http://i.imgur.com/ZhVps3b.jpg?1);
transition: all 1s ease;
}

html.scrolled {
background-image:url(http://i.imgur.com/h6rmrc0.png?1);
}

http://jsfiddle.net/pZrCM/652/

更新： 这个问题似乎只影响了Safari

Answer 1

您可能需要添加一些额外的转换属性才能在不同的浏览器上工作（正如您所说，它不适用于Safari）。

-webkit-transition: all 1s ease;/* Safari & Chrome */
-moz-transition: all 1s ease;/* Firefox */
-o-transition: all 1s ease;/* Opera */
transition: all 1s ease;