jquery last addclass
<p>i have four boxes that are styled with css and sit side by side with a margini on the right. for the last box i am adding a class that removes the right margin so they all sit on the same line.</p>

<p>here is the jquery that is in the <code>&lt;head&gt;</code></p>

<pre><code>    &lt;script type="text/javascript"&gt;

     $(document).ready(function(){          
        $('div.home-features:last').addClass('last');   
     });  
&lt;/script&gt;
</code></pre>

<p>here is the code generated</p>

<pre><code>&lt;div class="content-box2-top"&gt;&lt;!-- no content--&gt;&lt;/div&gt;
&lt;div class="content-box2-center"&gt;    

        &lt;div class="home-features"&gt;
            &lt;h2&gt;Services&lt;/h2&gt;
            &lt;span class="content"&gt;
                One point of contact for your international operations eliminating the need for multiple relationships.&lt;br /&gt;

            &lt;/span&gt;
            &lt;a class="read" href="/getdoc/762a1cb8-2492-4844-8401-5037e7c30afc/Services"&gt;Read More&lt;/a&gt;
        &lt;/div&gt;

        &lt;div class="home-features"&gt;
            &lt;h2&gt;Process&lt;/h2&gt;
            &lt;span class="content"&gt;
                Global access to your accounts, 24 hours a day through our secure online accounting portal.
            &lt;/span&gt;

            &lt;a class="read" href="/getdoc/6c7b45da-4e86-44fa-9a15-6d1298576b8a/Process"&gt;Read More&lt;/a&gt;
        &lt;/div&gt;

        &lt;div class="home-features"&gt;
            &lt;h2&gt;Benefits&lt;/h2&gt;
            &lt;span class="content"&gt;
                Alleviating the burden of recruiting and managing in-house accounting teams.
            &lt;/span&gt;
            &lt;a class="read" href="/getdoc/592b78e1-f17f-498e-b3bb-f159e4c2d348/Benefits"&gt;Read More&lt;/a&gt;

        &lt;/div&gt;

        &lt;div class="home-features"&gt;
            &lt;h2&gt;Reach&lt;/h2&gt;
            &lt;span class="content"&gt;
                Drawing on the local knowledge and expertise of our partner firms around the world.
            &lt;/span&gt;
            &lt;a class="read" href="/getdoc/9e82f2b8-7aaa-417d-9c23-a235c4ff26fd/Reach"&gt;Read More&lt;/a&gt;
        &lt;/div&gt;


&lt;/div&gt;
&lt;div class="content-box2-bottom"&gt;&lt;!-- no conetnt --&gt;&lt;/div&gt;
</code></pre>

<p>the problem is that when the page loads there is a delay in adding the "last" class to the last element. so it appears under the other three and then pings in to place! </p>

<p>how can i stop it from doing this and just appear inline?</p>
