Анимации JQuery OnClick и операторы if

Я потратил последние 90 минут или около того, пытаясь понять это. У меня есть сайт, анимированный с помощью JQuery, и две ссылки, которые появляются в конце анимации. Когда вы нажимаете на любую ссылку, div исчезает, чтобы показать больше ссылок. До этого момента все работает (для справки, ссылка 1 — «Тогда», а ссылка 2 — «Сейчас»).

Я хочу, чтобы это произошло, скажем, пользователь нажал «Тогда». Теперь он хочет нажать «Сейчас». Я хочу, чтобы div «Then» исчезал, а div «Now» исчезал. И наоборот. Я чувствую, что мой код почти готов, но я полный новичок в JS и, похоже, не могу его понять. Я также не хочу разрушать то, что я уже пытался понять. Код следует:

//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

Как я уже сказал, все исчезает, как и должно быть. Я просто не могу заставить один исчезнуть, а другой исчезнуть. Я думаю, что, возможно, мои операторы if находятся не в том месте.