【问题标题】：How to animate background position in IE8?如何在 IE8 中为背景位置设置动画？
【发布时间】：2011-08-09 09:19:25
【问题描述】：

我在 IE8 中遇到了动画效果的问题。该代码适用于 firefox、safari、chrome……但不适用于 IE8。

我使用的代码是：

$(function(){
    $("#wrapper").animate({
        backgroundPosition: "-261px center"         
    }, 12000 );
});

我正在使用 jquery-1.4.3.min.js

有没有办法让它在 IE8 中工作？

--- 更新 ---

我已经创建了这个fiddle，现在它可以工作了¿?¿?¿我没有改变任何东西。只需复制小提琴源框架并保存为 index3.html 即可。

我什么都不懂，但它的工作原理！谁能解释一下？

你可以在这里看到结果：dev.thepixellary.es/index3.html

--- 更新 2 ---

它可以工作，因为在小提琴中我使用的是 jquery 1.3.2 而不是 1.5.2，但是这段代码不起作用（IE8）：

$(".menu li").each(function(idx) {
  $(this).delay(idx * 1000).fadeIn("slow");
});

jsfiddle.net/oterox/wpzT6/8/

【问题讨论】：

即使在 IE6 中也可以使用：link。也许对你有帮助。
它必须是'center'属性使IE失败。既然你有了一个静态值（20px），IE 就可以做到了
没有。在小提琴中，我使用的是 jquery 1.3.2 而不是 1.5.2 并且可以，但是....然后我的另一个 jquery 失败了

标签： javascript jquery animation internet-explorer-8

【解决方案1】：

动画背景位置是 jQuery 的 technically unsupported。

使用jQuery BackgroundPosition 插件来解决这个问题。

【讨论】：

我正在使用该插件，但仍然无法使用：fiddle
我之前已经让这个插件工作了。你的小提琴失败了（404）。你有什么问题？

【解决方案2】：

这是所有浏览器的未定义行为。如果它在某些浏览器中工作，它是由卢克。

See the doc:

所有动画属性都应动画为单个数值。

你必须使用这个插件：Background-position animations

一些重复：

【讨论】：

使用那个插件我仍然得到同样的错误。我必须只添加 jquery.backgroundPosition.js 代码才能工作吗？我已经在演示中修改了它，但仍然无法正常工作。
尝试替换动画的中心部分：backgroundPosition: "-261px 20px"

【解决方案3】：

在 IE8 中工作！！

你可以看到解决方案here

我已经用这个替换了我的代码：

$.fn.scrollingBackground = function(options) {

   // settings and defaults.
    var settings = options || {};
    var duration = settings.duration|| 1;
    var step = settings.step || 1;

    var element = this;

    var animate = function() {
        element.css("background-position", "0px 0px");
        element.animate({
            backgroundPosition: step + "px 0px"
        }, duration);            
    };
    animate();
};

我正在使用 jQuery BackgroundPosition 插件

谢谢。

【讨论】：