0

以下の JQuery コードを使用して、display:none プロパティを持つクラスを追加および削除し、display:block を持つクラスを相対的に配置された 3 つの異なる div に追加します。基本的に、クリックするとページに異なる div を表示したい 3 つのリンクを持つサイド ナビゲーションがあります。

$(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/で私の Web サイトを表示し、サイド ナビゲーションを使用すると、div がフェード アウトするのがわかりますが、フェード インしている他の div がその下に一瞬表示されてから、所定の位置に移動します。それは途切れ途切れで専門的ではないように見えます.divを絶対に配置することなくこれを修正する方法はありますか?

4

1 に答える 1

0

これは、あなたが提案した変更を加えた後の私がこれまでに持っていたものですが、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 に答える