如何使用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)
});

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

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

Answer 3

你可以尝试这个，首先fadeOut 300ms然后在文本打印后淡出300ms

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

Answer 4

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

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

CodePen：http://jsbin.com/cetisobuhe/edit?html,js,output