Assistance with a jquery content swelling effect
<p>I am trying to build a small "swell" effect with jquery .animate and .hover. the mousein event seems to work well, however, on the mouse out, the margin snaps back to the original position, the animates back to the original state. I need the element to expand, then go back without changing the position of any of the other elements.</p>

<p>JS:</p>

<pre><code>$(document).ready(function(){       
    $(".nav-item").hover(
        function(){
            $(this).addClass('over');
            $(this).animate({
                width: '114px', 
                height:'114px', 
                margin: '-7px'}, 
                300);
        },
        function(){
            $(this).removeClass('over');
            $(this).animate({
                width:'100px',
                height:'100px',
                margin: '0'},
                300);}
    );
});
</code></pre>

<p>html:</p>

<pre><code>&lt;body&gt;
    &lt;div class="nav-item"&gt;&lt;/div&gt;
    &lt;div class="nav-item"&gt;&lt;/div&gt;
    &lt;div class="nav-item"&gt;&lt;/div&gt;
    &lt;div class="nav-item"&gt;&lt;/div&gt;
    &lt;div class="nav-item"&gt;&lt;/div&gt;
    &lt;div class="nav-item"&gt;&lt;/div&gt;
    &lt;div class="nav-item"&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>css:</p>

<pre><code>.nav-item {
background: #ffffff;
border: 1px #000000 solid;
border-collapse: collapse;
float: left;
height: 100px;
position: relative;
width: 100px;
}

.over {
z-index: 1;
}
</code></pre>

<p>I have this up at <a href="http://jsfiddle.net/SCxzs/" rel="nofollow">jsfiddle</a>.</p>

<p>Any help would be appreciated.</p>
