在 jQuery 中的 .animate 之后未执行 function() 调用的问题答案

【问题标题】：An issue with function() call not executing after .animate in jQuery在 jQuery 中的 .animate 之后未执行 function() 调用的问题
【发布时间】：2010-04-23 17:18:28
【问题描述】：

我不明白为什么function() 在.animate 之后没有执行。示例 jQuery 代码如下：

$('#spotlight_img_' + thisSpotId).css('z-index', zIndex).animate({ 底部：0 }, { 持续时间：500，队列：真 }，功能（） { alert('动画完成'); }); $('#spotlight_img_' + lastSpotId).animate({ 底部：“-400px” }, { 持续时间：0，队列：真 });

这是第 1 行中的函数，从技术上讲，它应该包含第 2 行中的内容。

我需要它如何工作：

1 - 动画 $('#spotlight_img_' + thisSpotId) 向上

2 - 向下动画$('#spotlight_img_' + lastSpotId)。

现在因为第二个动画是 0 秒长，它发生在第一个动画完成之前。

你可以在这里看到它的实际效果：http://design.vitalmtb.com/index2.html

非常感谢您的帮助！

【问题讨论】：

标签： jquery jquery-animate

【解决方案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'); });

【讨论】：