Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Animate top (From bottom to top)

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 });
like image 425
jQuerybeast Avatar asked Nov 06 '11 12:11

jQuerybeast


People also ask

Is jQuery slower for animations?

jQuery can be several times slower than CSS when talking about animations. CSS animations and transitions have the advantage of being hardware accelerated by the GPU, which is really good in moving pixels.

Which jQuery method can be used to gradually change the height of a selected element?

jQuery height() Method The height() method sets or returns the height of the selected elements.

Is jQuery used for animation?

With jQuery, you can create custom animations.

What does an easing do jQuery?

An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing , and one that progresses at a constant pace, called linear .


1 Answers

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...

like image 186
jQuerybeast Avatar answered Sep 21 '22 03:09

jQuerybeast