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
Vous devez vous connecter pour publier un commentaire.
Essayer avec:
Vous pouvez utiliser
marginTop
au lieu detop
dans votre fonction animate.