jQuery animate from CSS “top” to “bottom”

Question

I\'m looking to animate a div element from an absolute top position to an absolute bottom position on the page load.

The combination of CSS and jQuery code below fai

Answer 1

You could set the current bottom value via: css('bottom'). This works for me (jQuery1.7.2):

$('#line-three').css({bottom:$('#line-three').css('bottom'), top:'auto'});
$('#line-three').animate({ bottom: position }, 250);

Answer 2

You can animate it using this: Check out this JSFiddle:

$('#button').click(function(e){ // On click of something
    e.preventDefault(); // Prevent the default click aciton
    $("#line-three").animate({
        top: "300px",
    }, 1200);
});

Answer 3

If you want to animate you should do:

$("#line-three").animate({
    top: "500px",
    }, 1200);

Fiddle here: http://jsfiddle.net/nicolapeluchetti/xhHrh/