jQuery changement en douceur de innerHTML

Question

J'ai le code ci-dessous travailler comme un charme:

var div = $('#div'); 
div.html('<div>one line</div><div>another line</div>'); 
div.slideDown('slow'); 

Mais le problème vient quand je dois changer le contenu (le nombre de lignes):

div.html('<div>one line replacement</div><div>another line replacement</div><div>third line</div>') 

Cette transition est trop rapide. Comment animer cela?

Answer 1

Vous pouvez ajouter une durée invisible à l'html:

<span class="foo" style="display: none">some other lines</span> 

Et puis disparaître dans:

$("span.foo").fadeIn('slow'); 

En passant par votre modification, vous pouvez également envisager:

div.slideUp('slow'); // you may want this to be 'fast' 
div.html('some other lines'); 
div.slideDown('slow'); 

Answer 2

Si vous voulez faire prendre un certain temps, puis:

div.slideDown(numberOfMilliseconds); 

Answer 3

Peut-être que si vous mettez les lignes supplémentaires dans un div avec écran: style pas, alors vous pouvez disparaître dans cette div, quelque chose comme ça (le concept - le code non testé):

div.html("<div id='next_line' style='display:none'>some other lines</div>"); 
$("#next_line").fadeIn('slow'); 

Answer 4

Thomas mentionné "slideDown (numberOfMilliseconds)". Je l'ai essayé et doc de jquery a défini la vitesse en millisecondes est le temps pris pour exécuter l'amimation.

Dans ce cas, 1 ligne ou 10 lignes prendront le même laps de temps pour glisser. Si vous connaissez le nombre de lignes, vous pouvez peut-être ajouter un multiplicateur, par ex. slideDown (LineCount * speedInMS)

Answer 5

une ride sur la réponse de Daniel Sloof:

div.fadeOut('fast', function() { 
    div.html(html); 
    div.fadeIn('fast'); 
} 

Cela permettra d'assurer votre première animation est terminée avant de poursuivre. Dans mon cas actuel au moins, la décoloration fait une expérience plus agréable que glissante.