html5 word交換動畫

Question

我想換一個形容詞在「This site is cool」，使用一組單詞[awesome, fun, useful, beautiful]。我不想只在一個幀中交換它，我也想要一個很好的轉換。也許新單詞可以從頂部滑入，或者可以縮小並替換舊單詞。我如何實現它？ JavaScript的？ CSS3？謝謝。

Answer 1

您可以使用像fadeIn這樣的jQuery效果。

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();