Un problème avec l'appel de fonction() ne s'exécute pas après .animate dans jQuery

Question

Je ne peux pas comprendre pourquoi function() ne s'exécute pas après .animate. Exemple de code jQuery est ci-dessous:

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

Il est la fonction dans la ligne 1, qui est techniquement censé contenir ce qui est dans la ligne 2.

Comment je en ai besoin de travailler est:

1 - animer $('#spotlight_img_' + thisSpotId) up

2 - pour animer $('#spotlight_img_' + lastSpotId) vers le bas.

Maintenant que la 2ème animation dure 0 seconde, elle se produit immédiatement avant la fin de la première animation.

Vous pouvez le voir en action ici: http://design.vitalmtb.com/index2.html

Je serais vraiment reconnaissant de votre aide!

Answer 1

Cela fonctionne au lieu de la ligne 1 (décomposée en plusieurs lignes pour une meilleure lisibilité):

$('#spotlight_img_' + thisSpotId).css('z-index', zIndex) 
    .animate({ bottom: 0 }, { 
     duration: 500, 
     queue: true, 
     complete: function() { alert('animation complete'); } 
    }); 

Il existe deux versions de animate:

.animate(properties, [ duration ], [ easing ], [ callback ]) 
.animate(properties, options) 

Ici, vous utilisez la deuxième version qui passe une carte d'options, vous devez donc spécifier le rappel avec l'option complete.

Depuis queue: true est la valeur par défaut, vous pouvez également utiliser la première version:

$('#spotlight_img_' + thisSpotId).css('z-index', zIndex) 
    .animate({ bottom: 0 }, 500, function() { alert('animation complete'); });