2012-07-27 5 views
1

Pour une raison quelconque, le DIV que je veux animer est animé de haut en bas ... Je veux l'animer d'où il est jusqu'à la destination finale.jQuery: Animer div de position fixe UP à un autre DIV

Le DIV commence comme position: fixed au bas de la page.

C'est ce que je fais en ce moment:

var div2Pos = $("#feature-header-wrapper").position(); 
$("#123456").css('position', 'absolute'); 
$("#123456").animate({top: div2Pos.top}, 1000); 
+0

D'où ça vient-il? Le bas de la page? S'il vous plaît ajouter plus d'informations. –

+0

Il est fixé au bas du navigateur. – dcolumbus

Répondre

2

Je pense que c'est ce que vous voulez:

Demo: http://jsfiddle.net/SO_AMK/Q6KNk/

jQuery:

var div2Pos = $("#div2").position(); 
$("#square").css({ 
    position: 'absolute', 
    top: $("#square").position().top, 
    left: $("#square").position().left 
}); 
$("#square").animate({ 
    top: div2Pos.top 
}, 1000);​ 

HTML:

<div id="square">Lorem Ipsum...</div> 
<div id="div2">Lorem Ipsum...</div>​ 

CSS:

#square { 
    width: 100px; 
    height: 100px; 
    background-color: lightBlue; 
    position: fixed; 
    bottom: 0; 
} 
#div2 { 
    width: 100px; 
    height: 100px; 
    background-color: lightGreen; 
    position: relative; 
    top: 30px; 
} 

Fondamentalement, il obtient la position de div2 met alors #square à sa position actuelle, mais en utilisant à la place absolue de positionnement fixe de sorte que l'animation occu rs au lieu de sauter au sommet.

NOTE: Cela ne fonctionnera pas si square est à l'intérieur d'un élément relativement positionné!

0

vous pouvez mess avec quelque chose comme ça

 $("#123456").animate({top: '-=300px'}, 1000); 

cela va animer à 300px moins, en le déplaçant vers le haut (je pense que est ce que vous voulez)

+0

Non, cela ne fonctionne pas. : / – dcolumbus

1

J'ai le même problème. Mais le mien est dans un jeu de chasse aux duckhunt alors l'animation se déclenche plusieurs fois et j'ai pensé que cela pourrait vous aider à le savoir qu'il ne se passe que la première fois. Après cela, la div que j'anime conserve la position que je lui donne et l'anime de bas en haut. Donc si je dois ... je devine que je peux juste ajouter une petite animation supplémentaire qui ne fait rien. J'espère pouvoir trouver quelque chose de moins banal mais j'espère que cela aidera.