Jquery fadein et sur

Question

Check this out: http://novarose.co.cc/web2/

effets de fondu sont un peu foiré et je ne sais pas comment faire alors fonctionner correctement.

Je veux code à exécuter dans l'ordre suivant:

1. Fade out bloc
2. Insérer le nouveau contenu
3. fondu dans le bloc

Mon code jQuery pour cette page:

$ ('# navigation a'). Cliquez sur (function() { $ .get ("page.php", {page: $ (this) .attr ('id')}, fonction (données) { $ ('# content'). FadeOut ('lent') .html (données) .fadeIn ('lent'); }); });

Answer 1

Votre problème est ici: $('#content').fadeOut('slow').html(data).fadeIn('slow'); }); Cela commence le fadeIn avant la fadeOut se fait. Vous voulez faire ceci:

$('#content').fadeOut('slow', function(){ 
    $(this).html(data).fadeIn('slow') 
}); 

Le second argument de fadeOut est une fonction à appeler après fadeOut est terminée.

Answer 2

Vous pouvez déplacer le fondu à avant l'appel ajax:

$('#navigation a').click(function(){ $('#content').fadeOut('slow'); $.get("page.php", { page: $(this).attr('id') }, 
    function(data){ $('#content').html(data).fadeIn('slow'); }); });