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

Question

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

它适用于Chrome浏览器，IE7，IE8，但是：

它在IE9上很奇怪（后台在animation之前重置它的位置） 它不适用于Mozilla和Opera（滚动工作但背景的位置不是）

当鼠标滚轮事件被触发时，它会动画页面的滚动，并且它会动画背景位置比身体滚动更多一点，是什么给出了透视效果

Answer 1

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

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

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