使用jQuery .load()实现淡入效果

Question

我正在尝试使用jQuery通过AJAX在#primary中加载一个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;
    });

非常感谢您的帮助。

- Gab

Answer 1

实际上，我能够通过将效果应用于包装 div 而实现它...

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

- Gab

Answer 2

只有这个：

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

或者将此行为添加为load()函数的默认行为：

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

- Brynner Ferreira

Answer 3

当使用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()。

- Rory McCrossan

---

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

Answer 4

您也可以在淡入淡出效果中使用.load()，如下所示： $("#container").fadeOut("slow").load('data.html').fadeIn('slow');

- Vijaysinh Parmar

Answer 5

我发现像这样做很有效...

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

这段代码可以让

标签淡出，再淡入，并加载foo.blah.html文件。

- badsector

Answer 6

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

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

- Khan Laoji