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 });
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.
jQuery height() Method The height() method sets or returns the height of the selected elements.
With jQuery, you can create custom animations.
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 .
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With