Question

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

Answer 1

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!