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.fadeOut('fast', function() {
  div.html(html);
  div.fadeIn('fast');
}

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

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)». Я попробовал это, и документ jquery определил скорость в миллисекундах - это время, необходимое для выполнения анимации.

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

Answer 5

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

div.slideDown(numberOfMilliseconds);