jQuery .load() with fadeIn effect

问题:

I'm trying to load #content of a url via AJAX using jQuery within #primary. It loads but doesn't fadeIn. What am I doing wrong?

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

Many thanks for your help.

回答1:

Actually I was able to do it by applying the effect to the wrapper div instead...

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

回答2:

Just this:

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

Or to add this behaviour as default in the load() function:

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

回答3:

You can also use .load() in fading effect like this

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

回答4:

When using load() jQuery internally uses html() to updated your element. This means you can't apply any animation to it, as you're just updating the innerHTML property of the element.

Instead you'll need to write your own AJAX request to get the new HTML, put it in the element, then call 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;
});

I used get() here, but you could just as easily use post() or ajax().

Also, just to note, live() has been deprecated. You should instead use delegate() or, if you are using jQuery 1.7+, on().

回答5:

I've found doing something like this works well...

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

回答6:

This is the best way to fade in/out it naturaly, first you hide your container then you load your page in this container (it will be loaded but hidden) then just use the Jquery function .fadeIn() and it will unhide it adding the special effect.

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