jQuery плавное изменение innerHTML

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

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>')

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

9
html javascript jquery slideup

5 ответов

вы можете добавить невидимый диапазон в 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');
6

морщинка на ответе Даниэля Слуфа:

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

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

2

возможно, если вы поместите дополнительные строки в div с display: none style, то вы можете исчезнуть в этом div, что - то вроде этого (концепция-код не проверен):

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

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

div.slideDown(numberOfMilliseconds);
0

Томас упомянул " slideDown (numberOfMilliseconds)". Я пробовал это, и документ jquery определил скорость в миллисекундах-это время, необходимое для выполнения amimation.

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

0