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

时间:2011-08-09 09:19:26

标签: javascript jquery animation internet-explorer-8

我在IE8中遇到动画效果问题。该代码适用于firefox,safari,chrome ......但在IE8中没有。

The demo is here.

我正在使用的代码是:

$(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 /

3 个答案:

答案 0 :(得分:0)

这是所有浏览器的未定义的beahviour。如果它在某些浏览器中有效,那就是luke。

See the doc

  

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

您必须使用此插件:Background-position animations

有些重复:

答案 1 :(得分:0)

jQuery为背景位置设置了technically unsupported

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

答案 2 :(得分:0)

在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 插件

全部。