與函數（）調用不會執行之後jQuery中的.animate

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