jQuery.animate 背景位置答案

【问题标题】：jQuery.animate background-positionjQuery.animate 背景位置
【发布时间】：2011-10-10 22:04:37
【问题描述】：

如何在不使用插件的情况下使用 jQuery 的 animate 函数为 background-position 属性设置动画？当支持 backgroundPosition 时，我尝试切换回 1.4.4，但它似乎只能在 IE 上工作，而不是在 FF 或 Chrome 上。我试过查看 animate 函数的 step 回调，但我什么也做不了。

【问题讨论】：

最简洁的归档方式是使用 jQuery CSS hooks。请在此处查看我的answer to a similiar question。它带有问题的解决方案和demo page。

标签： javascript jquery jquery-animate background-position

【解决方案1】：

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

这是一个替代方案，但理想情况下它使用 Modernizr 之类的功能检测脚本来实现兼容性：

对 IE 分别使用 JQuery 的 .animate() 和 background-position-x 和 -y（这将适用于最新的 JQuery）。然后在support CSS transitions 的浏览器中（几乎除了 IE 之外的所有东西），使用 .css() 而不是 .animate() 来更改背景位置并在样式表中设置 CSS 过渡。

以上内容您将涵盖大多数浏览器，但它可能与 AS 不兼容，因为仅使用插件。在这里查看它：http://jsfiddle.net/lucylou/dVpjh/

【讨论】：

【解决方案2】：

据我所知，jQuery 无法为背景设置动画。但可以通过插件实现：

http://plugins.jquery.com/project/backgroundPosition-Effect

http://www.protofunc.com/scripts/jquery/backgroundPosition/

【讨论】：