Problem with function() call not executing after .animate in jQuery

Question

Hi, I can't figure out why function() does not execute after .animate. Example jQuery code is below:

$('#spotlight_img_' + thisSpotId).css('z-index', zIndex).animate({ bottom: 0 }, { duration: 500, queue: true }, function() { alert('animation complete'); });
$('#spotlight_img_' + lastSpotId).animate({ bottom: "-400px" }, { duration: 0, queue: true });

It's the function in line 1, which technically is supposed to contain what is in line 2.

How I need it to work is:

1 - animate $('#spotlight_img_' + thisSpotId) up

2 - to animate $('#spotlight_img_' + lastSpotId) down.

Now because 2nd animation is 0 seconds long, it happens immediately before 1st animation is completed.

You can see it in action here: http://design.vitalmtb.com/index2.html

I would really appreciate your help!

Answer 1

This will work instead of line 1 (broken up into multiple lines for readability):

$('#spotlight_img_' + thisSpotId).css('z-index', zIndex)
    .animate({ bottom: 0 }, { 
        duration: 500, 
        queue: true, 
        complete: function() { alert('animation complete'); } 
    });

There are two versions of animate:

.animate( properties, [ duration ], [ easing ], [ callback ] )
.animate( properties, options )

Here you are using the second version which passes a map of options, so you need to specify the callback with the complete option.

Since queue: true is the default, you can also use the first version:

$('#spotlight_img_' + thisSpotId).css('z-index', zIndex)
    .animate({ bottom: 0 }, 500, function() { alert('animation complete'); });