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

Daniel Sloof的回答：

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

这将确保您的第一个动画完成后再继续。至少在我目前的情况下，褪色比滑动更有经验。

Answer 3

也许如果你把额外的行放到一个带有display：none风格的div中，那么你就可以淡入那个div，就像这样（概念 - 代码没有经过测试）：

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

Answer 4

如果你想花一些时间，那么：

div.slideDown(numberOfMilliseconds);

Answer 5

Thomas提到“slideDown（numberOfMilliseconds）”。我已经尝试了它并且jquery的doc定义了以毫秒为单位的速度是执行动画所需的时间。

在这种情况下，1行或10行将花费相同的时间滑动。如果您知道行数，也许您可​​以添加乘数，例如slideDown（lineCount * speedInMS）