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