带有淡入效果的 jQuery .load()答案

【问题标题】：jQuery .load() with fadeIn effect带有淡入效果的 jQuery .load()
【发布时间】：2012-02-18 00:16:19
【问题描述】：

我正在尝试使用#primary 中的jQuery 通过AJAX 加载URL 的#content。它加载但不淡入。我究竟做错了什么？

$('.menu a').live('click', function(event) {
        var link = $(this).attr('href');
        $('#content').fadeOut('slow', function(){
            $('#primary').load(link+' #content', function(){
                $('#content').fadeIn('slow');
            });
        });
        return false;
    });

非常感谢您的帮助。

【问题讨论】：

标签： jquery load fadein

【解决方案1】：

实际上我可以通过将效果应用于包装器 div 来做到这一点......

$('#primary').fadeOut('slow', function(){
    $('#primary').load(link+' #content', function(){
        $('#primary').fadeIn('slow');
    });
});

【讨论】：

【解决方案2】：

就是这样：

$('.element').load('file.html',function(){}).hide().fadeIn();

或者在 load() 函数中添加默认行为：

$.fn.load_=$.fn.load;
$.fn.load=function(){
    return $.fn.load_.apply(this,arguments).hide().fadeIn();
}

【讨论】：

【解决方案3】：

你也可以像这样使用 .load() 的淡入淡出效果

$("#container").fadeOut("slow").load('data.html').fadeIn('slow');

【讨论】：

【解决方案4】：

当使用load() jQuery 内部使用html() 来更新你的元素。这意味着您不能对其应用任何动画，因为您只是在更新元素的 innerHTML 属性。

相反，您需要编写自己的 AJAX 请求来获取新的 HTML，将其放入元素中，然后调用 fadeIn()。

$('.menu a').live('click', function(event) {
    var link = $(this).attr('href');

    $('#content').fadeOut('slow', function() {
        $.get(
            link +' #content', 
            function(data) {
                $("#primary").html(data).fadeIn('slow');
            }, 
            "html"
        );
    });
    return false;
});

我在这里使用了get()，但您也可以轻松使用post() 或ajax()。

另外，请注意，live() 已被弃用。你应该改用delegate()，或者，如果你使用的是jQuery 1.7+，on()。

【讨论】：

它变得非常缓慢。它似乎正在重新加载目标页面的每个 js 脚本。我还使用了 jQuery 地址插件，它似乎以某种方式破坏了它。

【解决方案5】：

我发现做这样的事情效果很好......

$('#Div').fadeOut(0).fadeIn().load('foo.blah.html');

【讨论】：

【解决方案6】：

这是自然淡入/淡出的最佳方式，首先隐藏容器，然后将页面加载到此容器中（它将被加载但隐藏），然后只需使用 Jquery 函数 .fadeIn() 它就会取消隐藏添加特殊效果。

$(".myClass").click(function () 
{
    $("#Container").hide();
    $("#Container").load("magasin.html");
    $("#Container").fadeIn(); 
});

【讨论】：