Making jquery animation larger

Question

So I have been playing around with jquery animation and I have got it working using this method:

$(function() {
    $("#div3").animate(
        {top : "+=100"}, 500, function() {}
    );
});

http://jsfiddle.net/dT9Yk/ My problem is it doesn't fall very far, I was wondering if there is a way to tweak to make it fall from top of the page kind of like:

http://texts.com/

Thank You!

Answer 1

DEMO

$(function() {
    $('#div3')
    .css({
        // position the element off the top of the page
        top : ($('#div3').height() * -1) - $('#div3').offset().top
    }).animate(
        // animate to its natural resting place
        {top : 0}, 500, function() {}
    );
});

Answer 2

I know you asked for a javascript version... but this can be done in CSS3. The idea is, if it can be done in CSS3, the best practice is to do it in CSS3, instead of javascript, and it will be faster too. :)

Note: faster as in, multiple CSS3 animations can be rendered at once, whereas javascript is single-threaded, and your logic will not continue until your animation in javascript is complete. Check your network speeds. It provides a faster website in the long-run.

http://codepen.io/Surakusa/pen/IGidB/