来自divs JQuery的fadeIn/fadeOut和addClass/removeClass

我使用下面的JQuery代码添加和删除具有display:none属性的类，并将具有display:block的类添加到相对定位的三个不同div中。基本上，我有一个侧导航，有三个链接，当点击时，我想在页面上显示不同的div，一个淡出，另一个淡入

$(document).ready(function () {
    $('#what-we-do, #location').hide();
    $('#who-we-are').show();
});

$(function () {
    $("#show-main-who").mousedown(function () {
        $('#what-we-do, #location').fadeOut('fast', function () {
            $(this).addClass('hide-info');
            $(this).removeClass('show-info');
        });
    });
    $('#show-main-who').mouseup(function () {
        $('#who-we-are').fadeIn('fast', function () {
            $(this).removeClass('hide-info');
            $(this).addClass('show-info');
        });
    });
});
$(function () {
    $("#show-main-what").mousedown(function () {
        $('#who-we-are, #location').fadeOut('fast', function () {
            $(this).addClass('hide-info');
            $(this).removeClass('show-info');
        });
    });
    $('#show-main-what').mouseup(function () {
        $('#what-we-do').fadeIn('fast', function () {
            $(this).removeClass('hide-info');
            $(this).addClass('show-info');
        });
    });
});
$(function () {
    $("#show-main-location").mousedown(function () {
        $('#what-we-do, #who-we-are').fadeOut('fast', function () {
            $(this).addClass('hide-info');
            $(this).removeClass('show-info');
        });
    });
    $('#show-main-location').mouseup(function () {
        $('#location').fadeIn('fast', function () {
            $(this).removeClass('hide-info');
            $(this).addClass('show-info');
        });
    });
});

---

当你在上看到我的网站并使用侧边导航时，你可以看到div确实淡出，但另一个div淡入显示在它下面一瞬间，然后移动到位。它使它看起来起伏不平，不专业，你知道如何解决这个问题而不必让div绝对定位吗？

这是我在做了你建议的更改后到目前为止所做的，但它仍然显示原始div下方的div，然后在div消失后滑入其位置

$(document).ready(function() {
    $('#what-we-do, #location').hide();
        $('#who-we-are').show();    

        $("#show-main-who").click(function() {
            $('#what-we-do, #location').fadeOut('fast',function(){
            $(this).removeClass('show-info');
            $(this).addClass('hide-info');

            });

            $('#who-we-are').fadeIn('fast',function(){
                $(this).addClass('show-info');
                $(this).removeClass('hide-info');
            });
        });     

        $("#show-main-what").click(function() {
            $('#who-we-are, #location').fadeOut('fast',function() {
            $(this).addClass('hide-info');
            $(this).removeClass('show-info');
            });


            $('#what-we-do').fadeIn('fast',function(){
                $(this).removeClass('hide-info');
                $(this).addClass('show-info');
            });
        });

        $("#show-main-location").click(function() {
            $('#what-we-do, #who-we-are').fadeOut('fast',function(){
            $(this).addClass('hide-info');
            $(this).removeClass('show-info');
            });


            $('#location').fadeIn('fast',function(){
                $(this).removeClass('hide-info');
                $(this).addClass('show-info');
        });
    });
});

---

$（function（）{…}

是

$（document）.ready（function（）{…}）的缩写

而且您可能应该将所有代码合并到一个就绪处理程序中。另外，为什么不绑定到click事件而不是mousedown/mouseup，并为导航链接提供一个类，这样您就可以定义一个函数来处理所有导航，而不是每个链接一个？而且您似乎正在使用引导，所以您可以设置一些选项卡导航和使用iThanks Koala完成，我实际上正在尝试学习如何使用Javascript和JQuery，我希望通过自己的编码来完成这一步。我感谢您的上述评论，我将尝试使用click事件并将代码合并到一个处理程序下。如果您想自己编写代码，这是值得尊敬的，正如我所说的，您也应该这样做好吧，如果只使用一个函数来控制所有导航，那么如果有多个函数基本上执行相同的操作，但对于不同的元素，那么就永远不会有好结果。您可以使用公共类和可见性选择器来针对您的元素