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

标签 jquery css cross-browser

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

它在 Chrome、IE7、IE8 上运行良好,但是:

它在 IE9 上运行异常(背景在 animation 之前重置其位置) 它不适用于 Mozilla 和 Opera(滚动有效但背景位置无效)

它在鼠标滚轮事件被触发时动画滚动页面,它动画背景位置比 body 滚动多一点,这给人以透视感

最佳答案

要解决 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-xbackground-position-y 是 Microsoft 在旧版 IE 中实现的 css 元素。谷歌的人喜欢这个想法并采纳了它。我相信 Chrome 仍然可以让你拆分属性,但我不会指望它 :) 最后,这与“不要指望它”的情况一起出现,你不必包含“px”尺寸。有些元素不需要零值,但有些浏览器似乎在 javascript 中需要它。

关于jquery - 动画背景位置在浏览器上的工作方式不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14080731/

相关文章:

javascript - Fancybox 框不会弹出

javascript - 创建具有唯一 ID 的对象

jquery - 为什么 IE10 显示完全不同的东西

java - 使用@AndroidFindBy时元素为空

jQuery 无法在移动 Safari 和 Chrome 中工作

jquery - 在 jQuery 中使用存储变量作为 ReplaceWith() 方法的参数

javascript - 将 .filter() 链接到函数中以加载本地 JSON 数据

html - Bootstrap 3 100% 高度 DIV,带导航栏和粘性页脚

html - 电视形 CSS 图定界图像

firefox - Firefox 无法识别 WebP MIME 类型