Question

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

非常感谢你的帮助。

Answer 1

实际上，我可以通过将效果应用于包装div来实现...

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

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

Answer 3

你也可以像这样使用.load（）褪色效果

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

Answer 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()。

Answer 5

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

$（ '＃DIV'）淡出（0）.fadeIn（）负载（ 'foo.blah.html'）;

Answer 6

这是自然淡入/淡出的最好方法，首先你隐藏你的容器然后你在这个容器中加载你的页面（它将被加载但隐藏）然后只使用Jquery函数.fadeIn（）它将取消隐藏它添加特效。

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

带有fadeIn效果的jQuery .load（）

6 个答案: