jQuery cambio suave de innerHTML

Question

Tengo el siguiente código de trabajo como un encanto:

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

Pero el problema viene cuando tengo que cambiar el contenido (el número de líneas):

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

Esta transición es muy rápida. Cómo animar esto?

Answer 1

Se puede añadir un lapso invisible para el html:

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

Y luego se desvanecen en:

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

Pasando por su edicion, puede que quiera considerar:

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

Answer 2

Si desea realizar tarda un cierto tiempo, entonces:

div.slideDown(numberOfMilliseconds); 

Answer 3

Tal vez si pones las líneas adicionales en un div con pantalla: estilo ninguno, entonces se puede desvanecerse en ese div, algo como esto (concepto - código no probado):

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

Answer 4

Thomas mencionado "slideDown (numberOfMilliseconds)". Lo he intentado y el documento de jquery definió la velocidad en milisegundos que es el tiempo necesario para ejecutar la amimación.

En ese caso, 1 línea o 10 líneas tomarán la misma cantidad de tiempo para deslizarse. Si conoce la cantidad de líneas, quizás pueda agregar un multiplicador, p. slideDown (LineCount * speedInMS)

Answer 5

una arruga en la respuesta de Daniel Sloof:

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

Esto asegurará que su primera animación se ha completado antes de continuar. En mi caso actual, al menos, la decoloración hace una experiencia más agradable que deslizarse.