关于jQuery的.html（）函数的问题？

Question

现在当我替换“foo”div中的内容时，新内容会立即出现。是 有一种方法让新内容慢慢消失。

<div class="foo">Initial content to be replaced</div>

$('div.foo').html('New content');

我知道fadeIn（）函数，我问这个问题的原因是因为我无法理解它在技术上是如何可能的，因为foo div从来没有被隐藏过，所以它怎么能够“淡入”。但是，如果有人能够想到一种最超级的方式。

Answer 1

使用此：$('div.foo').html('New Content').hide().fadeIn();

Answer 2

这里的其他一些答案没有考虑到转换需要时间的事实 - html将在fadeOut中间被替换并且看起来像是一个错误。

假设你想要一个fadeOut来完成，那么替换html，然后fadeIn，使用回调：

$('div.foo').fadeOut(function () {
   $(this).html('New content').fadeIn();
});

Answer 3

的 Live Demo 的

$('div.foo').html('New content').hide().fadeIn();

先隐藏它，然后在

中淡化它

Answer 4

你可以试试这个：

$("div.foo").hide("slow").html("New Content").show("slow");

这会淡化div，更改内容，然后将其淡入，这可能会达到你想要的效果。