jQuery文本淡入/从一种文本过渡到另一种？

Question

jQuery显然可以轻松地淡入/淡出文本。但是，如果要将文本从一件事更改为另一件事怎么办？过渡会发生这种情况吗？例：<div id='container'>Hello</div>可以将文本“ Hello to World”更改为“ Hello to World”，但要使其具有过渡（例如淡入淡出或某种效果）而不是立即更改吗？

Answer 1

您可以使用回调，如下所示：

$("#container").fadeOut(function() {

  $(this).text("World").fadeIn();

});

您可以在这里尝试一下，或者因为在这种特殊情况下队列的工作方式，如下所示：

$("#container").fadeOut(function() {

  $(this).text("World")

}).fadeIn();

.text()当.fadeOut()结束时，这会在再次淡入之前执行调用。

Answer 2

如果您将使用hide / show或fadeIn / fadeOut，则可能会遇到“跳跃”效果，因为它会更改CSS显示属性。我建议使用不透明的动画。

像这样：

$('#container').animate({'opacity': 0}, 1000, function () {

    $(this).text('new text');

}).animate({'opacity': 1}, 1000);