如何使用 jQuery（或 CSS）淡入/淡出文本？答案

【问题标题】：How can I fadeIn/fadeOut of text using jQuery (or CSS)?如何使用 jQuery（或 CSS）淡入/淡出文本？
【发布时间】：2016-01-16 20:32:34
【问题描述】：

我正在构建一个随机报价生成器，并希望在单击按钮提示时在报价之间切换时使用淡入/淡出功能。但是我不确定如何在 jQuery 中定位文本，因为我直接从 Javascript 打印数组，如下所示：

$('.show-quote').text(randomQuote);

这是目前为止的项目：

【问题讨论】：

【解决方案1】：

我想这就是你想要的：http://codepen.io/anon/pen/GoMGQL

$('.show-quote').fadeOut(300, function(){
   $(this).text(randomQuote).fadeIn(300)
});

首先，它将在 300 毫秒内淡出。完成后，将执行附加的功能。它会更改文本，然后将其淡入。

如果你不希望背景也淡出，你可以把文字放在额外的<div>:http://codepen.io/anon/pen/OMxEvK

【讨论】：

【解决方案2】：

您可以使用$('.show-quote').fadeIn() 和$('.show-quote').fadeOut()

【讨论】：

【解决方案3】：

你可以试试这个，先fadeOut 300ms，然后fadeIn 300ms，然后再打印文本

$('.show-quote').fadeOut(300).fadeIn(300).text(randomQuote);

【讨论】：

【解决方案4】：

您可以链接 jQuery 函数来实现该功能。像这样的：

$('.show-quote').hide().html(randomQuote).fadeIn(1000);

【讨论】：