Smooth fading after Ajax with JQuery

I am using jquery ajax for changing page in my website. my code is this:

$('#'+target).fadeOut('slow', function(){
        $('#' + target).children().remove().end().append('<div style="width:' + loadingImageWidth + 'px;height:' + loadingImageHeight + 'px;background-color:black;-moz-border-radius:15px;"></div>');
        $('#'+target).fadeIn('slow', function(){
            $.ajax({
                type: type,
开发者_如何学运维                url: url,
                success: function(msg){
                    $('#'+target).fadeOut('slow', function(){
                        $('#'+target).html(msg);
                        $('#'+target).fadeIn('slow', function(){});
                    });
                }
            });
        });
    });

My problem is when I use fading, "#target" div's width and height change, so, my page's scroll change and it is really annoying because it seems that the page is jumping up and down ! I want to know how can I use the JQuery fading with a smooth effect. thanx guys.

It's difficult to diagnose without seeing your markup and css, but what might work is to make the target's parent maintain its height/width when you animate.

You could do that by setting the parent's dimensions to the target's height before you fade, and then you can update the parent's dimensions when the fade is complete.

Do this before you start:

$('#'+target).parent().height($('#'+target).height()).width($('#'+target).width());

And then you can call the same code inside the success block.

P.S. as a performance tip, string concatenation and dom searches are expensive, it's better to cache your target and use that throughout your code. For example:

var target = $('#'+target);
target.fadeOut('slow');

Then you're only performing the concatenation and lookup once, and using the same reference throughout the code.

Maybe that could solve it:
Animation Jump - quick tip
(But this bug is fixed since jQuery 1.3.)