为什么.animate在IE 8中如此之慢

Question

这是我的动画代码

    function MoveTeleport(LeftRight,UpDown) {
        var TileMoveLeft = new Number(-LeftRight);
        var TileMoveUp = new Number(-UpDown);
        this.MovetoLeft = TileMoveLeft * 70 + 'px';
        this.MovetoUp = TileMoveUp * 70 + 'px';

        this.Move = function () {
            $('#Player').fadeTo(200,0.1);

            $('#Map_Player').animate({
                'left': '+=' + this.MovetoLeft,
                'top': '+=' + this.MovetoUp
            }, 1000, function () {
                LeftCurrent = $('#Map_Player').css('left', 10);
                UpCurrent = $('#Map_Player').css('top', 10);
                $('#Player').fadeTo(200, 1);
            });
        }
    }

它在FireFox,Opera,Chrome中动画如此美观.但在IE8中,它确实不能正常工作,任何想法为什么？或者如何在IE 8中修复它？

Answer 1

jQuery .animate和其他类似的方法每帧重新计算DOM元素的CSS,然后更新元素的style属性.每个框架,浏览器都需要重新计算网站布局并进行渲染.在某些情况下,动画可能需要昂贵的布局重新计算(取决于网站元素的布局方式,CSS等).IE8有一个相当古老的渲染引擎,我会打赌你的情况下的布局重新计算对它来说太贵了.除了摆脱之外,没有其他方法可以解决这个问题.animate.

昨天在Smashing Magazine.animate的一篇文章中提到了性能问题- 这可能是一个有趣的事情.