JQuery OnClick animations and if statements

I've been spending the last 90 minutes or so trying to figure this out. I've got a site animated with JQuery, and 2 links that appear at the end of the animation. When you click on either link, a div fades in to reveal more links. Everything is working up to this point (for reference, link 1 is "Then" and link 2 is "Now").

What I want to happen is let's say a user clicked on "Then". Now he wants to click "Now". I want the "Then" div to fade out and the "Now" div to fade in. And vice versa. I feel like my code is almost there, but I'm a total JS noob and can't seem to get it. I also don't want to bust up what I've alr开发者_开发百科eady got trying to figure it out. Code follows:

//then + now animation

var thennav = document.getElementById('#thennavbox');
var nownav = document.getElementById('#nownavbox');

$(document).ready(function(){
$('#then').click(function(){
    $('#thennavbox').fadeIn(1000);
});

$('#now').click(function(){
    $('#nownavbox').fadeIn(1000);
});
});//end onclick animation

if(thennav.style.display=='none'){
    $('#nownavbox').fadeOut(1000, function(){
        $('#thennavbox').fadeIn(1000);
        });
    };

if(nownav.style.display=='none'){
    $('#thennavbox').fadeOut(1000, function(){
        $('#nownavbox').fadeIn(1000);
        });
    };//end if statements

//end then + now animation

Like I said, everything fades in as it's supposed to. I just can't get one to fade out and the other to fade in. I think perhaps my if statements are in the wrong place.

$('#then').click(function(){
    $('#thennavbox').fadeIn(1000);
    $('#nownavbox').fadeOut(1000);

});

$('#now').click(function(){
    $('#nownavbox').fadeIn(1000);
    $('#thennavbox').fadeOut(1000);
});