Question

我使用下面的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');
        });
    });
});

当您在http://jacobbuller.com/testsites/peacock/看到我的网站并使用侧面导航时，您可以看到div确实淡出，但另一个div淡入淡出显示在其下方，然后移动到位。它使它看起来波涛汹涌，不专业，任何想法如何解决这个问题，而不必让div绝对定位？

Answer 1

第二行有一段时间丢失。应阅读： -

$("#what-we-do, #location").fadeOut("slow", function() {

FadeIn / FadeOut是一个addClass / removeClass JQuery

1 个答案: