[ACCEPTED]-jQuery .load() with fadeIn effect-fadein

Accepted answer
Score: 39

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

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

Just this:

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

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

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

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

Instead you'll 6 need to write your own AJAX request to get 5 the new HTML, put it in the element, then 4 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 3 easily use post() or ajax().

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

Score: 3

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

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

Score: 2

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

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

Score: 0

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

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

More Related questions