Javascript FF Slow Chrome / Safari FAST

Here is an interesting riddle, I have javascript data that works fine in Safari / Chrome and even works in IE. But Firefox is really very slow. I noticed a section of code that seems to slow down.

Variable statistics var stats = [{"team":"IND","player":"Andrew Luck","position":"QB","round":1,"choice":1,"size":66}, ... ];

Here is the full code. The problem area is at the bottom. Does anyone know why Firefox is having problems with this?

(function($){
    $(document).ready(function() {
        var paper = Raphael("graph",390, 1600);

        var selectedteam;
        for (var i = 0 ; i <= 252; i++) {
            var s = stats[i].size*.3;
            stats[i].circles = paper.circle(stats[i].round*50-20, stats[i].choice*20, s*.75)
                .attr({
                        "fill": "RGB(" + (89*.3-s)*14 + ", " + s*8 + ", 100)",
                        "stroke": "RGB(255,255,255)"
                })
            stats[i].circles.player = stats[i].player;
            stats[i].circles.team = stats[i].team;
            stats[i].circles.position = stats[i].position;
            stats[i].circles.mouseout(function() {
                for (var lines in stats) {
                    stats[lines].circles.animate({"opacity": "1"}, 500);
                }
            });
            stats[i].circles.mouseover(function() {
                selectedteam = this.team;
                $('#error').empty().html("<div><p>" + this.player + ", " + this.position + "</p><p>" + this.team + "</p></div>");   
 //****THIS FOR LOOP IS REALLY REALLY SLOW IN FIREFOX*****
                for (var lines=0; lines <=252; lines++) {
                    stats[lines].circles.stop().animate({"opacity": ".1"}, 50);
                    if (selectedteam === stats[lines].team) {
                        stats[lines].circles.stop().animate({"opacity": "1"}, 50);
                    }
                }
            });

        }   
    });
})(jQuery);
+3
source share
3 answers

, , every javascript , jQuery ($() jQuery()) . each() jQuery .

Firefox, , .

.

+2

. , , mouseover.

, DOM - ( ) .

, , ?

- :

<span id='counter'>0</span>

var counter = parseInt($('#counter').val()),10);
counter++;
$('#counter').val(counter);
for (var lines=0; lines <=252; lines++) {
    stats[lines].circles.stop().animate({"opacity": ".1"}, 50);
    if (selectedteam === stats[lines].team) {
        stats[lines].circles.stop().animate({"opacity": "1"}, 50);
    }        
}

, .

, , , .

+1

"", . , Raphael "", "-". . "-", "fill-stroke", .

I'm still not sure why animating a change in opacity requires so many resources to complete.

Thanks everyone!

+1
source

All Articles