jQuery Animate top (From bottom to top)

jQuerybeast picture jQuerybeast · Nov 6, 2011 · Viewed 87k times · Source

I am trying to animate a Div a top:275.

I tried .animate( {marginTop: -820 } but on each screen it ends up to a different position. . .

So I changed the marginTop to .animate( {top: 275} but the div comes from the top to down (slidedown). Note that, so I can use the animate:top I had to set the div to position:absolute during the animation. . .

Is there any hackyway to make the top come from the bottom up or make the marginTop have the same distance from the top on each screen resolution ? ( I assume margintop can't be solved since im setting margin top to -820 in order to get at a point of top:275, therefore screens smaller than 1200px height, the div will go much higher...)

Here is my code:

$("#features").fadeIn()
            .css({
                position: 'absolute'
            }).animate({
                top: '275'
            }, function() { //callback });

Answer

jQuerybeast picture jQuerybeast · Dec 5, 2011

Ah Found it!!

$("#features").fadeIn()
.css({top:1000,position:'absolute'})
.animate({top:275}, 800, function() {
    //callback
});

So basically I've set the top from css at the very end to 1000, then animated it to 275 which is up...