JS - Before mouseenter function, dimension problems?
<p>I have a problem that before mouse over the image, image size is different than I wrote. But when I mouse over the image, image gets actual size that I wrote and stays like that. If I refresh the page, same problem goes on. There is no problem with first image of "ul", but second and thirth images are the problem. </p>

<pre><code>$(document).ready(function() {
    $('.desc21').mouseenter(function(e) {
        $(this).children('a').children('img').animate({
            height: '430',
            left: '-20',
            top: '-20',
            width: '485'
        }, 400);
        $(this).children('a').children('p').fadeIn(500);
        $(this).children('a').children('span').fadeIn(500);
    }).mouseleave(function(e) {
        $(this).children('a').children('img').animate({
            height: '410',
            left: '0',
            top: '0',
            width: '465'
        }, 400);
        $(this).children('a').children('p').fadeOut(500);
        $(this).children('a').children('span').fadeOut(500);
    });
});

$(document).ready(function() {
    $('.desc22').mouseenter(function (e) {
        $(this).children('a').children('img').animate({
            height: '220',
            left: '-10',
            top: '-10',
            width: '485'
        }, 400);
        $(this).children('a').children('p').fadeIn(500);
        $(this).children('a').children('span').fadeIn(500);
    }).mouseleave(function(e) {
        $(this).children('a').children('img').animate({
            height: '200',
            left: '0',
            top: '0',
            width: '465'
        }, 400);
        $(this).children('a').children('p').fadeOut(500);
        $(this).children('a').children('span').fadeOut(500);
    });
});

$(document).ready(function() {
    $('.desc23').mouseenter(function(e) {
        $(this).children('a').children('img').animate({
            height: '220',
            left: '-20',
            top: '-20',
            width: '485'
        }, 400);
        $(this).children('a').children('p').fadeIn(500);
        $(this).children('a').children('span').fadeIn(500);
    }).mouseleave(function(e) {
        $(this).children('a').children('img').animate({
            height: '200',
            left: '0',
            top: '0',
            width: '465'
        }, 400);
        $(this).children('a').children('p').fadeOut(500);
        $(this).children('a').children('span').fadeOut(500);
    });
});
</code></pre>

<p>//HTML</p>

<pre><code>&lt;ul&gt;
    &lt;li class="commercial desc21 port21"&gt;
        &lt;a href="#"&gt;
            &lt;span&gt;
                &lt;p&gt;The Worst Predator&lt;/p&gt;
            &lt;/span&gt;
            &lt;img src="images/portfolio/2-1.jpg" alt="" /&gt;
        &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="illustration desc22 port22"&gt;
        &lt;a href="#"&gt;
            &lt;span&gt;
                &lt;p&gt;Get A Groupie&lt;/p&gt;
            &lt;/span&gt;
            &lt;img src="images/portfolio/2-2.jpg" alt="" /&gt;
        &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="retouch desc23 port23"&gt;
        &lt;a href="#"&gt;
            &lt;span&gt;
                &lt;p&gt;Drive Safe&lt;/p&gt;
            &lt;/span&gt;
            &lt;img src="images/portfolio/2-3.jpg" alt="" /&gt;
        &lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>//CSS</p>

<pre><code>.port21, .port21 a img {
    width: 465px;
    height: 410px;
}
.port22, .port22 a img {
    position: relative;
    width: 465px;
    height: 200px;
    left: 10px;
}
.port23, .port23 a img {
    position: relative;
    width: 465px;
    height: 200px;
    left: 10px;
    top: 10px;
}
</code></pre>
