web-dev-qa-db-fra.com

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

Je cherchais une réponse ici, Google, etc., et je n'arrive pas à comprendre.

J'ai une image avec un identifiant de # pin01. Il s’agit d’une épingle sur une carte que j’anime au sein d’une div, qui se pose sur une image d’une carte (pensez à Google map).

Mon JQuery, qui fonctionne très bien, est la suivante:

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

et mon HTML est comme suit:

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

L’animation fonctionne très bien et l’épingle s’installe et tombe parfaitement sur la carte. Ce que je voudrais, c’est un rebond une fois qu’il a été positionné à 305 pixels du sommet de la div, donc quand il est sur la carte, il donnera un petit rebond à la fin. Je pensais utiliser cet effet:

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

J'ai pensé que le code final donnerait quelque chose comme ça:

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

Cela se traduit par un rebond, mais il revient à la position de départ initiale de la broche, sans conserver le mouvement de 305 pixels. J'ai essayé de placer un top: sur l'effet, ce qui n'a pas fonctionné.

J'ai essayé de combiner, imbriquer ceux-ci, etc., rien ne semble fonctionner.

Si quelqu'un a d'autres idées, curieux de voir comment le faire fonctionner correctement. Je pense que c'est un simple Tweak, je n'arrive pas à comprendre.

SOLUTION

Supprimé: 

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

Remplacé les deux par une seule ligne de la réponse ci-dessous: 

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

Résolu le problème du rebond une fois sur la carte.

Pour ajouter une fonctionnalité de fondu, je l’écris comme suit: 

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

Il y a peut-être une façon plus propre de faire la fondu, mais cela a fonctionné pour mon exemple.

jqueryjquery-animatebounce
11
stebesplace

Essayez avec:

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

Vous pouvez utiliser marginTop au lieu de top dans votre fonction animate.

0
r0m4n