jQuery Animer vers le haut

Question

J'ai un problème où j'ai un div qui est positionné absoutely et je veux l'animer de la page vers le haut (j'anime une personne qui saute de l'écran).

Cependant, j'ai besoin que l'élément soit en bas: 0, mais quand je veux que l'animation se termine, je veux que l'image soit en haut: -600px.

Quand j'écris

$("#jumper").animate({ 
    top: "-600px" 
}, 2000, 'easeInBack'); 

il fixe top top à 0 puis commence l'animation.

Peut-être y at-il un moyen d'obtenir le ypos de l'élément et le décodeur avec jQuery.css() sur le chargement de la fenêtre?

Que dois-je faire ici?

Answer 1

Que diriez-vous juste d'animer la propriété bottom? Vous pouvez obtenir la hauteur du document, puis ajouter 600 à celui-ci.

http://jsfiddle.net/kavY4/

var height = $(document).height(); 

$("#jumper").animate({ 
    bottom: height + 600 
}, 2000, 'easeInBack'); ​ 

Sinon, vous rencontrez les problèmes spécifiques navigateur où le top est calculé pour être auto, et l'animation essaie de démarrer à partir de cette position (qui finit par être 0, je suppose).

Pour que cela fonctionne, vous devez obtenir la première position de #jumper et définir manuellement la propriété top sur cette valeur avant d'animer.

var top = $('#jumper').offset().top; 

$("#jumper").css({top:top, bottom:'auto'}) 
.animate({ 
    top: -600 
}, 2000, 'easeInBack'); 

EDIT: Le deuxième exemple nécessaire bottom à régler à auto ainsi.

http://jsfiddle.net/kavY4/1/

Answer 2

Voici un exemple avec votre code: http://www.jsfiddle.net/fJKah/

semble fonctionner comme prévu pour moi. peut-être quelque chose d'autre interfère ..