javascript - 使用 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;