jquery - 同じアクションでのfadeOut()とfadeIn()

Question

私はJQueryを使用して言語選択ナビゲーションを作成しようとしています。選択すると、そのナビゲーションをフェードアウトすると同時に、フェードインを使用して2番目のナビゲーションを表示します。

これは私のマークアップです

div id="content">
        <img src="img/logo.png">
        <ul id="navLang">
            <li><a href="#" id="EN">English</a></li>
            <li><a href="#" id="ES">Español</a></li>
        </ul>
        <div id="navEng"> 
            <ul >
                <li><a href="#">Beauty</a></li>
                <li><a href="#">Campaign</a></li>           
                <li><a href="#">Editorial</a></li>
                <li><a href="#">Biography</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>  
        <div id="navEs">
            <ul>
                <li><a href="#">Belleza</a></li>
                <li><a href="#">Campañas</a></li>           
                <li><a href="#">Editorial</a></li>
                <li><a href="#">Biografía</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </div>  
    </div>  

これが私のスクリプトです

    $( document ).ready(function() {
    $("#navEng").hide();
    $("#navEs").hide();
    $("#EN").click(function(){
        $("#navLang").fadeOut("slow");
        $("navEng").fadeIn("Slow");
    });
    $("#ES").click(function(){
        $("#navLang").fadeOut("slow");
        $("navEs").fadeIn("Slow");
    });
});

フェードアウト効果はうまく機能しますが、2 番目のナビゲーションをフェードインさせることができません。display:none; を使用してみました。以前も同様でしたが、idも機能しませんでした..

基本的に、display:none; を使用してナビゲーションを非表示にすると、それらをフェードインさせることはできず、.hide() を使用すると非表示になりません。