javascript - javascript函数和HTML中的文本过渡/动画onclick

我有一个按钮在点击时触发此功能：

<button onclick="showAdvice()">Advice!</button>
<p id="text"></p>

<script>
    function showAdvice() {
        var advices = ["1","2","3"];
        var choose = Math.floor(Math.random() * advices.length);
        document.getElementById("text").innerHTML = advices[choose];
    }
</script>

onclick操作会在“文本”段落中生成建议，它们以随机顺序出现。我希望它们之间有一个过渡-不透明，淡入/淡入。如何在CSS / JavaScript中实现呢？

最佳答案

您可以使用jquery创建动画。

function showAdvice() {
    $("#text").hide();
  var advices = ["1", "2", "3"];
  var choose = Math.floor(Math.random() * advices.length);
  document.getElementById("text").innerHTML = advices[choose];
  $("#text").fadeIn();
}

例：
https://jsfiddle.net/90mxq8bf/