JQuery OnClickのアニメーションとif文

Question

私はこれを理解するために最後の90分を費やしてきました。私は、JQueryでアニメーション化されたサイトと、アニメーションの最後に表示される2つのリンクを持っています。いずれかのリンクをクリックすると、divがフェードインしてより多くのリンクを表示します。すべてがこの時点まで動作しています（参考のためにリンク1は "Then"、リンク2は "Now"です）。

私がしたいことは、ユーザーが「Then」をクリックしたとしましょう。今すぐ「今すぐ」をクリックします。私は "Then" divをフェードアウトし、 "Now" divをフェードインしたいと思います。私のコードはほぼそこにあるように感じますが、私は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文が間違った場所にあると思います。

Answer 1

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

}); 

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