0

我正在使用下面的 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 绝对定位吗？

4

1 回答 1

0

这是我在做出您建议的更改后到目前为止所拥有的，但它仍然会在原始 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');
        });
    });
});
于 2013-08-16T18:17:38.917 回答