JQuery плавного изменения innerHTML

Question

У меня есть код ниже работает как шарм:

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

Но проблема возникает, когда мне нужно изменить содержание (количество строк):

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

Этот переход слишком велик. Как оживить это?

Answer 1

Вы можете добавить невидимую оболочку в HTML:

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

А затем выгорают их:

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

Просматривая ваше редактирование, вы также можете рассмотреть:

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

Answer 2

Если вы хотите, чтобы сделать это занять определенное время, а затем:

div.slideDown(numberOfMilliseconds); 

Answer 3

Может быть, если вы поставите лишние строки в DIV с дисплеем: ни один стиль, то вы можете исчезнуть в этом DIV, что-то вроде этого (концепция - код не тестировался):

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

Answer 4

Томас упомянутый «slideDown (numberOfMilliseconds)». Я пробовал это, и doc dquery определял скорость в миллисекундах - это время, затраченное на выполнение амитации.

В этом случае для прокрутки одной линии или 10 линий потребуется столько же времени. Если вы знаете количество строк, возможно, вы можете добавить в множитель, например. slideDown (LineCount * speedInMS)

Answer 5

морщин на ответ Daniel Sloof в:

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

Это обеспечит первые завершения анимации, прежде чем продолжить. В моем текущем случае, по крайней мере, исчезновение делает более приятный опыт, чем скольжение.