jquery - 为什么 .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 之外，没有其他方法可以解决这个问题。

.animate 性能问题已在 article on Smashing Magazine 中提及。昨天 - 读起来可能会很有趣。