JQuery Animar con efecto 'Bounce' después de completar la animación?

Question

He estado buscando una respuesta aquí, Google, etc., y parece que no puedo encontrar esta.

Tengo una imagen con un ID de # pin01. Este es un pin en un mapa que tengo animando dentro de un div, aterrizando en una imagen de un mapa (piense en el mapa de Google).

Mi jQuery, que funciona muy bien, es la siguiente:

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

y mi HTML es el siguiente:

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

La animación funciona muy bien, y el pasador se desvanece, y cae en al mapa muy bien. Lo que me gustaría es un rebote después de que se haya colocado 305px desde la parte superior del div, de modo que cuando esté en el mapa, dará un pequeño rebote al final. Pensé que haría uso de este efecto:

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

que pensé el código final sería algo como esto:

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

que se traduce en un rebote, pero vuelve de nuevo a la posición de partida original para el pin, no reteniendo el movimiento de 305px. Intenté colocar una tapa: sobre el efecto, que no funcionó.

He intentado combinar, anidar estos, etc., nada parece funcionar.

Si alguien tiene alguna otra idea, tenga curiosidad por saber cómo hacer para que funcione correctamente. Creo que es un simple ajuste, parece que no puede resolverlo.

SOLUCIÓN

Eliminado:

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

Sustituido tanto con una sola línea de la respuesta a continuación:

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

solucionado el problema del rebote una vez en el mapa.

Para añadir en algunas funciones de fundido, lo escribí la siguiente manera:

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

Puede haber una manera más clara para hacer el fundido, pero esto funcionó para mi ejemplo.

Answer 1

intento con:

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

Answer 2

Se puede utilizar en lugar de marginToptop en su función animada.