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

그것은 기술적으로 내가 작업에 필요한 방법 라인 2.

에 무엇을 포함하도록되어 라인 1의 기능은 다음과 같습니다

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

을