CODEWITHSUNDEEP
jqueryanimationjquery-animate
dcolumbus
dcolumbus

Reputation: 9714

jQuery: Animate div from position fixed UP to another DIV

For some reason the DIV I want to animated is animating from the top down... I want to animate it from where it is UP to the end destination.

The DIV is starting as position: fixed to the bottom of the page.

This is what I'm doing right now:

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

Upvotes: 1

Views: 8743

Answers (3)

Paul Barnes
Paul Barnes

Reputation: 11

I have the same problem. But mine is in a duckhunt game so the animation fires several times and I thought it might help you to know it only happens the first time. After that, the div I'm animating retains the position I give it and animates from the bottom up. So if I have to...I'm guessing I can just add an extra little animation that does nothing. Hopefully I can find something less banal but I hope that helps.

Upvotes: 1

A.M.K
A.M.K

Reputation: 16785

I think that this is what you want:

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;
}

Basically it gets div2's position then sets #square to it's current position but using absolute instead of fixed positioning so that the animation occurs instead of it jumping to the top.

NOTE: This will not work if square is inside of a relatively positioned element!

Upvotes: 2

Scott Selby
Scott Selby

Reputation: 9580

you can mess around with something like this

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

this will animate to 300px less , moving it up (I think that is what you wanted)

Upvotes: 0

Related Questions