Expand a LI item and reorder the rest of them
<p>I'm trying to make the following effect in jQuery:</p>

<p><strong>Description.</strong></p>

<p>I have a list of LIs with thumbnails for each. When I click the thumbnail, I'm animating the width of that LI to include a big image (e.g. from 300px to 972px; something like jQuery Popeye plug-in effect).</p>

<p>Each LI has a fixed width of 300px and a "nomarginright" appended via nth-child in jQuery (the 3rd item in a row must have that class).</p>

<p><strong>Issues.</strong></p>

<p>If I click the first LI in a row, it expands without going beyond its container. But if I click the 2nd, it expands beyond its container and it is leaving the 1st LI on the first row while the 3rd is on another row with "nomarginright" class attached (thus having no space between the 3rd and the 4th).</p>

<ol>
<li>How do I expand the LI in a row and reorder the inactive LI items once I click a thumbnail (reseting the "nomarginright" effect, too)?</li>
</ol>

<p>A desired solution will be: in that row, move the active LI before any inactive LI and reset the nomarginright.</p>

<pre><code>    $('#portfolio ul li div.picture a').each(function() {

    $(this).click(function() {
        $(this).parent().animate({
            width: 972,
            height: 504
        }, 2000);

        $(this).parents('li').addClass('active').animate({
            width: 972
        }, 2000);

        return false;
    });
</code></pre>

<p>HTML:</p>

<pre><code>&lt;li&gt;
&lt;div class="picture"&gt;
&lt;a href="includes/pictures/portfolio-client-2.png" title="#"&gt;&lt;img src="includes/pictures/portfolio-client-1.png" alt="#" /&gt;&lt;/a&gt;
&lt;/div&gt;&lt;!-- end .picture --&gt;
&lt;/li&gt;
</code></pre>

<p>The above just gets repeated in a UL.</p>
