Hello,
today I was working on my new project and I noticed a problem using .animate() method.

For example:
I have something like:

1. <div id="container">
2.         <div id="element1">...content...</div>
3.         <div id="element2">...content...</div>
4.         <div id="element3">...content...</div>
5.         etc.. // here is more elements
   
6. </div>

And:

1. $('#element1').animate({ left: "+=32", top: "+=32" }, 500);
2. $('#element2').animate({ left: "+=32", top: "-=32" }, 500);
3. $('#element3').animate({ left: "-=32", top: "+=32" }, 500);
4. etc... // there is more animations created by loop
   

And it works perfectly. However, the main problem is that sometimes I need to add new elements to the container.

1. str = "[some divs here]";
   
2. document.getElementById("container").innerHTML += str;

Then, the animation stops. Why does it happen and how can I fix that?