CODEWITHSUNDEEP
jquery
Alireza Masali
Alireza Masali

Reputation: 688

Why .animate is so slow in IE 8

this is my animate Code 

    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);
            });
        }
    }

it Animated so nice in FireFox,Opera,Chrome . but in IE8 it does'nt work well , any idea why ??or how to fix it in IE 8 ??

Upvotes: 1

Views: 476

Answers (1)

mingos
mingos

Reputation: 24502

jQuery's .animate and other similar methods recalculate a DOM element's CSS each frame, then update the element's style property. Each frame, the browser needs to recalculate the site layout and render it. In certain cases the animation might require expensive layout recalculation (depends on how the site elements are laid out, on your CSS, etc.). IE8 has a rather old rendering engine and I would wager the layout recalculation in your case is just too expensive for it. There's no way to fix that other than getting rid of the .animate.

The issue of .animate performance has been mentioned in an article on Smashing Magazine yesterday - it might be an interesting thing to read.

Upvotes: 5

Related Questions