html5单词交换动画

Question

我想使用一系列单词[awesome, fun, useful, beautiful]来交换“此网站很酷”中的形容词。我不想只在一帧中交换它，我也希望有一个很好的过渡。也许新单词可以从顶部滑入，也可以缩小并替换旧单词。我该如何实现它？ JavaScript的？ CSS3？感谢。

Answer 1

你可以使用像fadeIn这样的jQuery-Effects。

HTML：

<div>This site is <div id="adjDiv" style="display:none"></div>.</div>

的JavaScript

var adjPool = ["awesome", "fun", "useful", "beautiful"];
var adj = adjPool[Math.round(Math.random() * (adj.length-1))];
$("#adjDiv").text(adj);
$("#adjDiv").fadeIn();