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(\'clic         


        

Answer 1

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