jQuery文本淡入/从一个文本转换到另一个文本？

Question

jQuery可以很容易地淡出/淡出文本.但是,如果您想将文本从一件事改为另一件,该怎么办？过渡会发生这种情况吗？

例:

<div id='container'>Hello</div>

可以将文本Hello更改为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);

Answer 3

这是一个实例.

(function() {

var quotes = $(".quotes");
var quoteIndex = -1;

function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextQuote);
}

showNextQuote();

})();

它运作良好.