Fading lisse après Ajax avec JQuery

Question

J'utilise jquery ajax pour changer de page sur mon site web. mon code est le suivant:

$('#'+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(){}); 
        }); 
       } 
      }); 
     }); 
    }); 

Mon problème est quand j'utilise la décoloration, « #target » changement de largeur de div et de la hauteur, donc, changement de défilement de ma page et il est vraiment gênant car il semble que la page est sauter de haut et en bas ! Je veux savoir comment puis-je utiliser le fondu JQuery avec un effet lisse. gars merci.

Answer 1

Il est difficile à diagnostiquer sans voir votre balisage et css, mais ce qui pourrait fonctionner est de faire de la cible parent conserve sa hauteur/largeur lorsque vous animez.

Vous pouvez le faire en définissant les dimensions du parent à la hauteur de la cible avant de vous fondre, puis vous pouvez mettre à jour les dimensions du parent lorsque le fondu est terminé.

Faites ceci avant de commencer:

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

Et vous pouvez appeler le même code à l'intérieur du bloc de succès.

P.S. En tant que conseil de performance, la concaténation de chaînes et les recherches dom sont chères, il est préférable de mettre en cache votre cible et de l'utiliser dans votre code. Par exemple:

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

Ensuite, vous êtes seulement d'effectuer la concaténation et recherche une fois, et en utilisant la même référence dans le code.

Answer 2

Peut-être que cela pourrait résoudre:
Animation Jump - quick tip
(. Mais ce bug est corrigé depuis jQuery 1.3)