jquery - jQuery 中 .animate 之后未执行 function() 调用的问题

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