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

这种转变太快了。如何动画化这个？

score 6 · Accepted Answer

您可以向 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');

score 2 · Accepted Answer

Daniel Sloof 回答的一个问题：

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

这将确保您的第一个动画在继续之前完成。至少在我目前的情况下，淡入淡出比滑动带来更好的体验。

score 1 · Accepted Answer

也许如果您将额外的行放入具有 display:none 样式的 div 中，那么您可以淡入该 div，如下所示（概念 - 代码未测试）：

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

score 0 · Accepted Answer

0

如果你想让它花费一定的时间，那么：

div.slideDown(numberOfMilliseconds);

于 2009-07-17T17:31:14.643 回答

score 0 · Accepted Answer

Thomas 提到了“slideDown(numberOfMilliseconds)”。我已经尝试过了，jquery的文档以毫秒为单位定义的速度是执行动画所花费的时间。

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

5 回答 5