jQuery .prepend behaves wierd within my animation loop

If you check the following link for my working example:

http://jsfiddle.net/xavi3r/Cd8cV/

You can see that when prepend() is invoked the positioning is lost within the animation and the order in which elements are placed seems to get distorted; (check HTML to see output);

$('#container .animateMe').prepend($('#container .animateMe .cop开发者_运维百科y ').clone().removeClass('copy').removeClass('active'));

I have a solution, but it doesn't solve the prepend problem. If you click any button when the animation is still happening, the squares become offset.

This is an edit where the click event becomes unbinded to your left and right buttons as the animation is happening. This stops another animation running at the same time, and the squares don't get offset. The event gets rebinded at the end of the animation callback.

Check it out :

http://jsfiddle.net/SxFPc/

I have merged your left and right click methods into a single handler since they were doing the same thing, apart from the position offset.