How to alter and animate a div the right way?
<p>i have a div like this:</p>

<pre><code>&lt;div class="class1"&gt;
    &lt;div class="class2"&gt;&lt;/div&gt;
    &lt;div class="class3"&gt;&lt;/div&gt;
    &lt;div class="class4"&gt;
         &lt;div class="class5"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>This div exists several times on the page.</p>

<p>Now i want to remove some of the child elements, rearrange others and animate that process the right way.</p>

<p>Currently i do it like this.</p>

<p>Example:</p>

<pre>
var mainElement = $('class1');

mainElement.find('class2').css('property','value');
mainElement.find('class3').remove();
mainElement.find('class4').animate({'property': 'value'});

</pre>

<p>This works but it is not as smooth as i would like it to be. When doing it to one element at a time it works but even that is a bit choppy. However, the main problem is that this code is execute on page load and like i said before, it is applied to more then on element at the same time. Then it gets really choppy, to a point where you don't see the animation at all.</p>

<p>Could someone explain to me how to do it the right way?</p>

<p>When i do, for example $('class1').fadOut() that works pretty smooth, even for 50 elements at the same time.</p>

<p>Greetings,
Andy</p>
