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之外，没有办法解决这个问题。

昨天在article on Smashing Magazine中提到了.animate表现的问题 - 这可能是一件有趣的事情。

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

1 个答案: