Question

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