JQuery Animate con Effetto 'Bounce' dopo che l'animazione è stata completata?

Question

Sono stato a caccia di una risposta qui, Google, ecc, e non riesco a trovare abbastanza bene questo.

Ho un'immagine con un ID di # pin01. Questo è un segnaposto su una mappa che ho animato verso il basso all'interno di un div, atterrando su un'immagine di una mappa (si pensi a Google map).

mio JQuery, che funziona solo grande, è questa:

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

e il mio HTML è la seguente:

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

L'animazione funziona alla grande, e il perno svanisce, e cade su alla mappa bene. Quello che mi piacerebbe è un rimbalzo dopo che è stato posizionato a 305 px dalla parte superiore del div, quindi quando è sulla mappa, darà un piccolo rimbalzo alla fine. Ho pensato di utilizzare questo effetto:

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

ho pensato che il codice finale sarebbe qualcosa di simile:

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

che si traduce in un rimbalzo, ma ritorna alla posizione di partenza per il perno, senza trattenere il movimento di 305 px. Ho provato a posizionare una cima: sull'effetto, che non ha funzionato.

Ho provato a combinare, nidificare questi, ecc., Non sembra funzionare nulla.

Se qualcuno ha altri pensieri, curioso di vedere come farlo funzionare correttamente. Penso che sia un semplice ritocco, non riesco a capirlo.

SOLUZIONE

Rimosso:

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

Sostituito sia con una singola linea dalla risposta qui sotto:

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

risolto il problema del rimbalzo una volta sulla la mappa.

di aggiungere in alcune funzionalità dissolvenza, l'ho scritto come segue:

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

Ci può essere un modo più pulito per fare la dissolvenza, ma questo ha lavorato per il mio esempio.

Answer 1

Prova con:

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

Answer 2

È possibile utilizzare marginTop invece di top nella funzione animate.