如何在IE8中设置背景位置动画？

Question

我在IE8中有动画效果问题。 该代码可在Firefox，Safari，Chrome中使用，但在IE8中则无效。

演示在这里。

我使用的代码是：

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

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

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

-更新-

我已经创建了这个小提琴 ，现在可以使用了。我没有做任何更改。只需复制小提琴源框架并将其另存为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/

Answer 1

对于所有浏览器来说，这都是一个不确定的行为。 如果它在某些浏览器中有效，那就靠运气。

参见文档 ：

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

您必须使用此插件： 背景位置动画

一些重复：

• jQuery为块设置背景动画？
• jQuery动画背景位置

Answer 2

jQuery 技术上不支持动画背景位置。

使用jQuery BackgroundPosition插件可以解决此问题。

Answer 3

在IE8中工作！

你可以在这里看到解决方案

我已经用以下代码替换了我的代码：

$.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插件

全部。