1

ここで説明されているようにコンテンツをロードする方法を使用していますhttp://css-tricks.com/rethinking-dynamic-page-replaceing-content/ただし、コンテンツの後に発生するjQuery関数 .fadeOut の問題に遭遇しています変更されます。したがって、ユーザーがナビゲーション リンクをクリックすると、コンテンツが変化し、新しいコンテンツがフェードアウトしてからフェードインします。デモでは、コンテンツがフェードアウトし、変化してから、新しいコンテンツがフェードインします。

これは、私のサイトに合わせて変更した jQuery の唯一の部分です。

function loadContent(href){
    $mainContent
            .find("#guts")
            .fadeOut(750, function() {
                $("header nav ul li a").removeClass("current");
                console.log(href);
                $("header nav ul li a[href$='"+href+"']").addClass("current");
                $mainContent.hide().load(href + " #guts", function() {
                    $mainContent.fadeIn(750, function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });
                });
            });
}

編集: 追加するのを忘れていました。このスクリプトは Firefox では正常に動作しているようですが、Chrome では動作していないようです。

4

1 に答える 1

0

これを回避する方法は、2 つの「ページ」を使用することで、そのうちの 1 つが表示されません。

<div id="page">The actual visible page</div>
<div id="holder">The 'hidden' page</div>

次に、コンテンツをホルダーにロードし、フェードアウト、フェードインしてから切り替えます。これが私が何を意味するかを示す基本的なスクリプトです

<script>

    // load the content into the hidden div
    function loadContent(URL) {

        // show a loading gif or something
        $('#loading').show();

        // grab new page content
        $('#holder').load('URL', function() {

            // remove loading gif
            $('#loading').hide();

            // fade divs
            replaceDivs();

        });
    }

    // fade out old div, fade in new div, replace content and switch
    function replaceDivs() {

        // fade out old div
        $('#page').fadeOut(750, function() {

            // fade in new div
            $('#holder').fadeIn(750, function() {

                // add content to old div
                $('#page').html($('#holder').html());

                // show old div
                $('#page').show();

                // hold new div until next click
                $('#holder').hide();

            });
        });
    }
</script>
于 2013-02-25T03:17:05.370 に答える