JQuery OnClick 动画和 if 语句

Question

过去 90 分钟左右我一直在试图解决这个问题。我有一个使用 JQuery 制作动画的网站，以及动画末尾出现的 2 个链接。当您单击任一链接时，div 会淡入以显示更多链接。到目前为止，一切正常（作为参考，链接 1 是“然后”，链接 2 是“现在”）。

我想要发生的情况是，假设用户单击“然后”。现在他想点击“现在”。我希望“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);
});