1

这是我的动画代码

    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 中修复它？

4

1 回答 1

5

jQuery.animate和其他类似方法每帧重新计算 DOM 元素的 CSS，然后更新元素的style属性。每一帧，浏览器都需要重新计算站点布局并进行渲染。在某些情况下，动画可能需要昂贵的布局重新计算（取决于站点元素的布局方式、CSS 等）。IE8 有一个相当旧的渲染引擎，我敢打赌在你的情况下重新计算布局对它来说太贵了。除了摆脱.animate.

昨天在 Smashing Magazine 上的一篇文章.animate中已经提到了性能问题——这可能是一件有趣的事情。

于 2013-01-16T11:23:42.407 回答