jQuery: using fadeIn() avec .html()

Question

J'ai un morceau de code jQuery qui interroge une page via POST, puis cette page retourne du texte qui s'affiche sur la page. Voici le code que je utilise pour le faire avec succès:

$.post(
    "query.php?module=vote", 
    {answer: ans, pid: pid, to: to, page: page}, 
    function(responseText){ 
     $("#poll").html(responseText); 
    }, 
    "html" 
); 

J'ai essayé de changer $("#poll").html(responseText) à $("#poll").html(responseText).fadeIn(1500); mais il ne fonctionne pas.

Que dois-je faire/modifier pour que le texte disparaisse dans la page?

Answer 1

Afin de disparaître dans , l'élément doit d'abord être effacé. Essayez la décoloration instantanément (0 secondes) puis en utilisant une fonction de rappel pour ajouter le contenu et fondu.

$.post(
    "query.php?module=vote", 
    {answer: ans, pid: pid, to: to, page: page}, 
    function(responseText){ 
     $("#poll").fadeOut(0,function(){ 
      $(this).html(responseText).fadeIn(); 
     }); 
    }, 
    "html" 
); 

Answer 2

Avant de pouvoir ajouter quelque chose, vous devez vous assurer qu'il est caché. Essayez ceci:

$("#poll").html(responseText).hide().fadeIn(1500); 

Alternativement, vous pouvez vous assurer que l'élément est caché en utilisant le CSS:

#poll { 
    display: none; 
} 

démonstration en direct (montrant les deux approches): http://jsfiddle.net/n5rnw/1/

Answer 3

En raison de l'élément est de montrer par défaut, donc besoin de fadeOut/cacher d'abord, puis à nouveau fadeIn le elemet, comme ceci:

$('#element').fadeOut(500).html(content).fadeIn(500);