jquery - 动画背景位置在浏览器上的工作方式不同

Question

fiddle here - 目标是在背景上滚动时产生一些透视效果。

它在 Chrome、IE7、IE8 上运行良好，但是：

它在 IE9 上奇怪地工作（背景重置其位置之前animation）它在 Mozilla 和 Opera 上不起作用（滚动工作但背景位置不工作）

它在触发鼠标滚轮事件时动画页面滚动，并且动画背景位置移动比正文滚动多一点，这是什么给透视感觉

Answer 1

要解决 IE9（和 Mozilla 等）的问题，请从“background-position-x”中删除“-x”。现代浏览器不再使用它，因为它不是任何标准规范的一部分。如果你想用 jQuery 的 animate 方法改变背景位置，你必须同时包含 X 和 Y 属性。

$('div').animate({'background-position':'0px 50px'});
-OR-
$('div').animate({'background-position':'50px 0px'});

background-position-x和background-position-y是微软在旧版 IE 中实现的 css 元素。谷歌的人喜欢这个想法，所以采纳了它。我相信 Chrome 仍然允许您拆分属性，但我不会指望它:) 最后，这与“不要指望它”的情况相一致，您不必包含“px”尺寸。有些元素不需要它为零值，但有些浏览器似乎在 javascript 中需要它。