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

时间:2012-12-29 10:22:11

标签: jquery css cross-browser

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

它适用于Chrome浏览器,IE7,IE8,但是:

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

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

1 个答案:

答案 0 :(得分: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中。