Проблема с вызовом функции (), не выполняющимся после .animate в jQuery

Question

Не могу понять, почему function() не выполняется после .animate. Пример кода jQuery ниже:

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

Это функция в строке 1, которая технически должна содержать то, что находится в строке 2.

Как мне это нужно, чтобы работать:

1 - анимация $('#spotlight_img_' + thisSpotId) вверх

2 - для анимации $('#spotlight_img_' + lastSpotId) вниз.

Теперь, поскольку вторая анимация длится 0 секунд, это происходит непосредственно перед завершением первой анимации.

Вы можете увидеть это в действии здесь: http://design.vitalmtb.com/index2.html

Буду очень признателен за вашу помощь!

Answer 1

Это будет работать вместо строки 1 (разбито на несколько строк для удобства чтения):

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

Существует две версии animate:

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

Здесь вы используете вторую версию, которая передает карту опций, поэтому вам нужно указать обратный вызов с опцией complete.

Поскольку по умолчанию queue: true, вы также можете использовать первую версию:

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