Question

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

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/

Answer 2

如果您尝试淡入淡出内容，则为不透明度属性设置动画而不是将元素完全淡化，以保留容器高度非常有用。

$(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);
        });
    });
});

Answer 3

确保你有一个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);
                    });
                });
            });   
        });
    });
});

有意义吗？

编辑：修改了一下。

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

3 个答案: