Alert Box Running First?
<p>I have some jQuery/JS below. The first thing to run is the alert box at the end. </p>

<pre><code>$(document).ready(function() {
    $("#id1 img , .msg").stop().animate(
        { width: '300px', height: '300px'}, 
        { duration: 'slow', easing: 'easeInSine' }).pause(3000);

    $(".msg").animate(
        { width: '50px', height: '50px' }, 
        { duration: 498, easing: 'easeOutSine' });
    $("#id1 img").animate(
        { width: '50px', height: '50px' }, 
        { duration: 500, easing: 'easeOutSine' });

    $("#id1 img , .msg").animate(
        { width: '300px',height: '300px'}, 
        { duration: 'slow', easing: 'easeInSine' }).pause(3000);

    alert('eh?');
});
</code></pre>

<p><em>I do have a <a href="http://gsgd.co.uk/sandbox/jquery/easing/" rel="nofollow">easing</a> plugin.</em></p>

<p>If I run this the alert will show, and then the first animate will happen in the background but not be shown. It will just appear at the final size.</p>

<p>Shouldn't the alert run at the end of all the animation? </p>

<p>Can anyone explain why this is happening?</p>
