1

I'm using the method of loading content as described here http://css-tricks.com/rethinking-dynamic-page-replacing-content/ however I'm running into the issue of the jQuery function .fadeOut occurring AFTER the content is changed. So when the user clicks the navigation link the content changes, then the new content fades out then fades back in. In the demo the content fades out, changes, then the new content fades in.

Here's the only part of the jQuery that I've changed to fit my site.

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"
                        });
                    });
                });
            });
}

Edit: I forgot to add, this script appears to be working fine in Firefox, but not in Chrome

4

1 回答 1

0

我们解决这个问题的方法是使用 2 个“页面”，其中一个是不可见的。

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

然后我们将内容加载到 holder 中，然后淡出、淡入，然后切换。这是一个基本脚本，显示了我的意思

<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 回答