javascript - Why is this jQuery animation so SLOW on Firefox 4/5? -

edit phrogz: appears problem framerate of jquery animation when particular complex css applied. see video @ bottom example of problem.

---

i think hard copy , paste whole code here. i've create fiddle this.

to honest, css not important on this (i putted have decent grid). removed many functions original version, in fact aren't important.

the 1 works clicking on buttons + tracks (which call addtrack()) adds new track/line in grid. tested on chrome, ie, , firefox < 4 version. there isn't problem. it's rapid , fluid.

the problem on firefox 4 or 5. it's slow add new track/line. it's fast turtle.

what function done clone (copy handler) element trackon, written in hidden field (tracklistoff) , add (insertafter) applying fade effect. (thats means new line in grid).

why behaviour on firefox? many elements browse on dom suppose. need rid slow attitude... can do?

edit

you can hear difference chrome , firefox (5, last version) on this video. try hear/see difference between clicking on mouse , add new line (with effect). it's frozen (also when try add more tracks quicly).

still problem me, suggestion appreciate :)

1. this not slow me. on computer running firefox 5 can add many tracks in less second. performance seeing? ("fast turtle" not quantitative measurement. :)

2. when have trouble javascript speed, profile it, using developer tools chrome/safari/ie or firebug firefox. here's see when run profiler on jsfiddle , click on +track button twice:

   

   from can see of time spent in set function mootools library. since don't see library included in code, i'm assuming profile tainted jsfiddle.

3. so, create standalone test case without unnecessary css , profile that. see (for several presses of +track button):

   

   almost of time spent in clone() function.

4. so can it? try pre-creating html string (in js) template row, , instead of using 'clone' try creating with:

   $(templatestring).hide().insertafter(...).fadein(600);