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

Question

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

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

这是到目前为止的项目：

http://codepen.io/biancalelei/pen/vLeJVd

Answer 1

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

Answer 2

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

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

首先，它将在300ms内消失。 完成后，将执行附加功能。 它会更改文本，然后将其淡入。

如果您也不希望背景逐渐淡出，可以将文本放在额外的<div> ： http : //codepen.io/anon/pen/OMxEvK

Answer 3

您可以尝试此操作，首先在文本打印后淡出300ms，然后淡入300ms

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

Answer 4

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

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

CodePen： http ：//codepen.io/anon/pen/wMrXyv