jquery - Page navigation using animate top to bottom or bottom to top -

jquery - Page navigation using animate top to bottom or bottom to top -

i'm attempting implement page navigation involves divs animating top or bottom depending on link selected. let's have link 1, link 2, , link 3.

if viewing contents of link 1 , select link 2 content slides up. if viewing contents of link 2 , select link 1 content slides down.

a working illustration can found on http://thelincolnmovie.com/.

i'm using code, animates divs in , out via opacity, did way in effort myself on right track , i'm hoping can converted functionality i'm looking for.

var $btns = $('.nav a'), $slides = $('.slides > .content');

$btns.click(function(){ //add 'active' class active link $(this).addclass('active'); //remove 'active' class previous link $(this).parent().siblings().find('a').removeclass('active'); //animate divs $slides.eq($btns.index(this)).animate( {"opacity": "1"}, "slow").siblings().animate( {"opacity": "0"}, "slow"); siblings().hide('fast'); homecoming false; }); //first link clicked on page load $btns.first().click();

i know can utilize animate() , animate css top property, can't seem work properly. position off , transition wonky. i'm interested in having div slide out 1 time page has settled place. there jquery function doesn't allow next animation execute until previous animation has finished?

jquery jquery-animate