Advice on how to animate multiple DOM elements
<p>I have multiple <code>&lt;li&gt;</code> elements which contain multiple <code>&lt;div&gt;</code> elements. Some of them have a starting <code>display</code> property of <code>none</code>.<br>
Based on mouse interaction, I want to show or hide some of the <code>&lt;div&gt;</code> elements.</p>

<p>CSS transitions can't transition display changes. And setting height and opacity to 0 isn't a good idea, some of the elements have inputs or buttons.</p>

<p>So the next step was to use JavaScript for animations. I'm using jQuery.</p>

<p>My problem is that elements that need to be hidden or shown in parallel. Because of the DOM structure I can't just hide or show the parent because some of the elements will be hidden while others will be shown.</p>

<p>So my question is, how would one efficiently handle multiple parallel animations (fades and slides mostly) on multiple elements while keeping code clean and maintainable and performance as good as possible.</p>

<p>An example of markup, where the div elements need to be show or hidden:</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Thank you.</p>
