Question

我正在使用这里描述的加载内容的方法http://css-tricks.com/rethinking-dynamic-page-replacing-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中却没有。

Answer 1

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

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

页面切换后应用jQuery .fadeOut

1 个答案: