jQuery .load() with fadeIn effect

Question

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.

Answer 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');
    });
});

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

Answer 3

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

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

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

Answer 5

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

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

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