javascript - 如何使用 jquery 的 .load() 实现 "animate"页面之间的转换

Question

我有这个 ajax 网站，页面通过 load() 加载，但是如何添加转换？一个简单的 FadeOut + 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() });
    });
});

Answer 1

您需要比 .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/