Question

I have some jQuery/JS below. The first thing to run is the alert box at the end.

$(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?');
});

I do have a easing plugin.

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.

Shouldn’t the alert run at the end of all the animation?

Can anyone explain why this is happening?

Answer 1

This pause plugin says that it “holds everything in the queue” for the specified amount of time. It will not actually pause execution (there is no sleep in javascript).

So, this is exactly the expected thing, that the alert will show up first.