如何用jquery的.load来“动画化”页面之间的过渡

问题描述

|| 我有这个ajax网站，页面通过ѭ0加载，但是如何添加过渡？一个简单的FadeOut + FadeIn已经很好。 这是我用来加载它的代码（加上一个加载指示器）。 我希望当前页面（只是容器）淡出，而新页面随着fadeIn到来

$(document).ready(function() {
    $(\'a\').click(function(event) {
        $(\"#container\").append(\'<div id=\"loading\">Loading...</div>\');
        event.preventDefault();
        var url = $(this).attr(\'href\');
        $(\'div#container\').load(url,function() { $(\"#loading\").fadeOut() });
    });
});

    

解决方法

您需要比

.load()

细一些的东西，以便您可以在插入新内容之前进行

fadeOut()

：

$(function()
{
    var $container = $(\'#container\');

    $(\'a\').click(function()
    {
        $container.html(\'<div id=\"loading\">Loading...</div>\');

        var url = $(this).attr(\'href\');

        $.get(url,function (data)
        {
            $(\"#loading\").fadeOut(function()
            {
                // without this the DOM will contain multiple elements
                // with the same ID,which is bad.
                $(this).remove();

                $container.hide().html(data).fadeIn();
            });
        });

        return false;
    });
});

（非常基础）演示：http://jsfiddle.net/mattball/Cgqbx/     ,如果您尝试淡入和淡出内容，可以设置不透明度属性的动画而不是完全淡出元素，以保持容器高度。

$(document).ready(function() {
    $(\'a\').click(function(event) {
        $(\"#container\").animate({\'opacity\': 0},200);
        event.preventDefault();
        var url = $(this).attr(\'href\');
        $(\'div#container\').load(url,function() {
            $(this).animate({\'opacity\': 1},200);
        });
    });
});

    ,确保您具有类似以下内容的html标记：

<div id=\"container\">
    <div id=\"content\"></div>
</div>

CSS：

#loading { display:none }

然后，使用一些简单的jQuery，您将能够解决此问题：

$(function() {
    $(\'a\').click(function(e) {

        e.preventDefault();

        var url = $(this).attr(\'href\');
        var content = $(\'#content\');

        content.fadeOut(400,function() {

            $(\"#container\").append(\'<div id=\"loading\">Loading...</div>\');

            var loading = $(\'#loading\');

            loading.fadeIn(400,function() {
                content.load(url,function() { 
                    loading.fadeOut(400,function() {
                        $(this).remove();
                        content.fadeIn(400);
                    });
                });
            });   
        });
    });
});

合理？ 编辑：修改了一点。