jQuery.animate background-position [英] jQuery.animate background-position

问题描述

如何在不使用插件的情况下使用jQuery的animate函数为background-position属性设置动画？
当支持backgroundPosition时，我尝试切换回1.4.4，但它似乎只适用于IE而不适用于FF或Chrome。
我已经尝试过查看animate函数的步骤回调，但我无法正常工作。

how can I animate the background-position property using jQuery's animate function without using a plugin? I tried switching back to 1.4.4 when backgroundPosition was supported, however it just seems to work on IE and not on FF or Chrome. I've tried looking at the step callback of the animate function, but I can't get nothing to work.

推荐答案

我有同样的问题。由Samich链接的插件是用一块石头击中两只鸟的唯一方法（几乎所有浏览器中的动画只有JQuery / Javascript）。

I had this same problem. The plugin linked by Samich is the only way to hit both birds with one stone (animate in nearly all browsers with nothing but JQuery/Javascript).

这是另一种选择，但是理想情况下，它使用像Modernizr这样的功能检测脚本来实现兼容性：

Here's an alternative, but it ideally uses a feature-detection script like Modernizr for compatibility:

分别使用JQuery的.animate（）和background-position-x和-y用于IE（这将起作用）使用最新的JQuery）。然后在支持CSS转换（几乎除了IE之外的所有内容）的浏览器中，使用.css（）而不是.animate （）更改背景位置并在样式表中设置CSS转换。

Use JQuery's .animate() and background-position-x and -y separately for IE (this will work with the latest JQuery). Then in browsers that support CSS transitions (nearly everything besides IE), use .css() instead of .animate() to change the background position and set a CSS transition in your stylesheet.

您将覆盖大多数具有上述内容的浏览器，但它可能不兼容AS只是使用插件。在这里看到它： http://jsfiddle.net/lucylou/dVpjh/

You'll be covering most browsers with the above, but it may not be AS compatible as just using a plugin. See it at work here: http://jsfiddle.net/lucylou/dVpjh/

这篇关于jQuery.animate background-position的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！