jQuery animate effect optimization

I am experimenting with jQuery and the animate() functionality. I don't believe the wo开发者_StackOverflow中文版rk is a final piece however I have problem that I can't seem to figure out on my own or by trolling search engines.

I've created some random animate block with a color array etc and everything is working as intended including the creation and deletion of the blocks (div's). My issue is within 2mins of running the page, Firefox 4 is already at more than a 500,000k according to my task manager. IE9 & Chrome have very little noticeable impact yet the processes still continue to increase.

Feel free to check out the link here: http://truimage.biz/wip300/project%202/

My best guess are the div's are being created at a greater speed than the 2000ms they are being removed however I was hoping an expert might either have a solution or could explain what I am doing wrong and some suggestions.

On another note, from the start of my typing this out till now the process is at 2,500,000k. Insane!m

It could be a lot of things other than just your script there. It could be a mem leak in one of the jQuery things you use, pretty hard to say.

Something you could try is this though:

Instead of creating new squares, use a "square pool". Let's say you create 20 squares and just keep re-using them instead of creating new ones.

You'd basically just have an array for the pool and take elements out from it when they are displayed, and put them back to it when the animation finishes.