JQuery Animate avec effet 'Bounce' une fois l'animation terminée?

J'ai été à la chasse autour d'une réponse ici, Google, etc., et ne semblent pas tout à fait clou de celui-ci.

J'ai une image avec l'ID #pin01. C'est une épingle sur une carte que j'ai l'animation vers le bas à l'intérieur d'un div, à l'atterrissage sur l'image d'une carte (pensez à Google map).

Mon JQuery qui fonctionne tout simplement génial, est-ce:

$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);

et mon code HTML est comme suit:

<img src="images/pin_blue.png" id="pin01" />

L'animation fonctionne très bien, et la broche fondus dans, et des gouttes sur la carte de l'amende juste. Ce que je voudrais, est un rebond après qu'il a été placé 305px à partir du haut de la div, de sorte que quand il est sur la carte, il va donner un peu de rebondir à la fin. J'ai pensé que je pourrais utiliser à cet effet:

$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);

J'ai pensé que le code final serait quelque chose comme ceci:

$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);
$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);

Que les résultats dans un rebond, mais elle renvoie à l'origine de la position de départ pour la broche, ne pas conserver la 305px mouvement. J'ai essayé de placer un top: sur l'effet, qui n'a pas fonctionné.

J'ai essayé la combinaison, l'imbrication de ces, etc., rien ne semble fonctionner.

Si quelqu'un a d'autres pensées, curieux de voir la manière de l'obtenir pour fonctionner correctement. Je pense que c'est un simple tweak, vous n'arrivez pas à le comprendre.

SOLUTION

Supprimée:

$('#pin01').animate({ opacity: 0}, 0).delay(1000);
$('#pin01').animate({ opacity: 1, top: "350px" }, 500);

Remplacé à la fois avec une seule ligne de la réponse ci-dessous:

$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});

Résolu le problème de l'rebondir une fois sur la carte.

D'ajouter dans certains de fondu fonctionnalité, je l'ai écrit comme suit:

$('#pin01').animate({ opacity: '0' });
$('#pin01').delay(500).show().animate({ top: 305, opacity: '1' }, {duration: 1000, easing: 'easeOutBounce'});

Il peut être le moyen le plus propre à faire s'estomper, mais cela a fonctionné pour mon exemple.

source d'informationauteur stebesplace