[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(){
Score: 10

Just this:


Or to add this behaviour as default 1 in the 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() {
            link +' #content', 
            function(data) {
    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


Score: 2

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


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

More Related questions