0

ページを下にスライドさせてから、別のページを上にスライドさせようとしています。でも、なぜか、思いつかない。

http://maximsiebert.com/unamed/Untitled-1.html

このページを見ると、Aboutナビゲーション リンクをクリックするとページが上にスライドし、もう一度クリックすると下にスライドすることがわかります。についても同じですContact page。

問題は、About pageアップがあり、連絡先リンクをクリックすると、About pageダウンが必要で、Contact pageアップがスライドする、またはその逆です。しかし、私はそれを機能させることができないようです。

これが私のコードです: ps: "divPages" には #aboutpage と #contactpage があります

 $(document).ready(function() {
 $('.about').click(function() {
    if (!$('#aboutpage').is(":visible")) {
    $('#portfolio').slideUp(1000);
        $('#aboutpage').slideDown(1000);
    }else{
        $('#portfolio').slideDown(1000);
        $('#aboutpage').slideUp(1000);
    }

});

});

$(document).ready(function() {
$('.contact').click(function() {
    if (!$('#contactpage').is(":visible")) {
        $('#portfolio').slideUp(1000);
        $('#contactpage').slideDown(1000);
    }else{
        $('#portfolio').slideDown(1000);
        $('#contactpage').slideUp(1000);
    }

});

});

$(document).ready(function() {
$('.welcome').click(function() {
    if ($(divPages).is(":visible")) {
        $('#portfolio').slideDown(1000);
        $(divPages).slideUp(1000);
        }else{
        $('html, body').animate({scrollTop:0}, 'slow');
    }

});

});

4

2 に答える 2

1

あなたの概要ページはまだそこにありますが、後ろのどこかに隠されています. これがあなたの問題の完全な拡大だとは思いませんが、それが大きな部分を占める可能性があります。

slideDown() の後に .css({'z-index':'-1'}); を追加します。ans slideUp() と同様に add .css({'z-index':'100'});

$('#about').slideDown(1000).css({'z-index':'-1'});
$('#contact').slideDown(1000).css({'z-index':'100'});

クロスフェード スライド ショーの EI で同じ問題が発生しました。他の写真は他の写真の上にとどまっていたので、うまくいきませんでした。

お役に立てれば。

編集：もう一度見てみると、私のfirebugによると、約は隠されたままでした。次に、表示されているかどうかを確認し、必要に応じて表示を変更する必要があります。

これは、次のように .is(':visible') で実現できます。

if($('#about').is(':visible') == false) $('#about').show();

必要に応じて、他の要素の html ポインターを再利用して変更します。

于 2012-10-20T03:50:29.137 に答える
0

代わりに、クリック イベントがバインドされているすべてのメニュー項目で単一のクラスを共有します。次に、現在表示されているアイテムを追跡するクラスを追加します。

最終編集コンテンツ div の id に等しいクラス.menu-itemとデータ属性をメニュー li に追加します。data-content-div

<li class="about menu-item" data-content-div="contactpage">about</li>

そして、あなたが持っているものの代わりにこのコードを試してください:

$(document).ready(function() {
    $('.menu-item').click(function() {
        if ( $(this).hasClass('menu-active') )
        {
            var contentDiv = $(this).data('content-div');
            $('.menu-active').removeClass('menu-active');
            $('#' + contentDiv).slideDown(1000);
        }
        else if ( $('.menu-active').length )
        {      
            var menuItem = $(this);
            var hideDiv = $('.menu-active').data('content-div');
            $('.menu-active').removeClass('menu-active');
            $('#' + hideDiv).slideDown(500, function() { 
                menuItem.addClass('menu-active');
                $('#' + menuItem.data('content-div') ).slideUp(1000);
            });
        }
        else
        {
            $(this).addClass('menu-active');
            $('#' + $(this).data('content-div') ).slideUp(1000);
        }

    });
});

</p>

私があなたのスタイルをすべて持っていれば、これがうまくいくフィドルです。</p>

于 2012-10-20T01:55:29.420 に答える