JQuery OnClick 애니메이션 및 if 문

Question

저는 지난 90 분 정도를 보내고 있습니다. JQuery로 애니메이션 된 사이트와 애니메이션의 끝 부분에 나타나는 2 개의 링크가 있습니다. 두 링크 중 하나를 클릭하면 div가 페이드 인되어 더 많은 링크를 표시합니다. 모든 것은이 시점까지 작동합니다 (참조 용으로 링크 1은 "Then"이고 링크 2는 "Now"임).

내가 원하는 것은 사용자가 "Then"을 클릭했다고 가정 해 봅시다. 이제 그는 "Now"를 클릭하려고합니다. 나는 "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); 
});