使用 jQuery 在滚动时平滑过渡图像答案

【问题标题】：transition smoothly an image on scroll with jQuery使用 jQuery 在滚动时平滑过渡图像
【发布时间】：2016-04-28 13:18:21
【问题描述】：

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

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

有人可以解释如何做到这一点，以使颜色平滑过渡而不会出现奇怪的闪烁吗？

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

【问题讨论】：

你能提供小提琴吗，因为我看不到任何演示
已更新，问题似乎只存在于 Safari 中
找到这个stackoverflow.com/questions/21767037/…
你在找这个 - jsfiddle.net/pZrCM/653 ?
安德鲁您的解决方案有帮助，您能否将其发布为答案？你能解释一下为什么 Safari 不喜欢我的简单解决方案吗？非常感谢！

标签： javascript jquery html css

【解决方案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;

【讨论】：

我根据你的建议更新了它，但它仍然在 Safari 中运行，还有其他想法吗？谢谢。