How do i animate the position of an element

I have a this jquery

var total_height = $(window).height();
var element_top = $(".box").position().top;
var element_height = $('.box').outerHeight(true);

if((element_top + element_height)>total_height){
 $(".box").css('top', (total_height - element_height));
}

This moves the element from off the scr开发者_Go百科een to on the screen, but i want to animate this...any ideas

You can call jQuery's animate method.

See animate from jquery

$('.box').animate({ top: (total_height - element_height),}, duration );