fadIn array in javascript 中的下一个文本

Question

假设我有一个代码可以随机选择数组中的一个元素，如下所示，我将如何使下一个元素淡入；

var textHolder = document.getElementById("text");
    var button = document.getElementById("btn");
    var arrayText = ["the King", "love don't cost a thing", "the programming guru", "a"];

 <h2 id="text">change me randomly</h2>
    <button id="btn">new random</button>

这是执行随机文本生成器的函数

var randomText = function(){
var randomNumber = Math.floor(Math.random()*arrayText.length);
textHolder.innerHTML = arrayText[randomNumber];
};

我尝试在此处添加 fadin 方法，但代码停止工作，但是当我删除 fade 方法时，它又开始工作了，请问我做错了什么。

button.addEventListener("click", function(){
textHolder.fadeOut();
randomText();
textHolder.fadeIn();
});

Answer 1

我认为您可以使用 jQuery 来做到这一点，这是我的代码片段

var textHolder = $("#text"); // See, you can type less
var button = $("#btn"); // Also here
var arrayText = ["the King", "love don't cost a thing", "the programming guru", "a"];

var randomText = function() {
  var randomNumber = Math.floor(Math.random() * arrayText.length);
  textHolder.text(arrayText[randomNumber]);
};

$(function() {
  // On click event
  button.click(function() {
    // Fade out the text holder
    textHolder.fadeOut(function() {
      // After that, display the random text
      randomText();
      // then, fade in the text holder
      $(this).fadeIn();
    });
  });
});

<!-- Here, I've included jQuery library to make it work. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Contents -->
<h2 id="text">change me randomly</h2>
<button id="btn">new random</button>

fadIn array in javascript 中的下一个文本

fadIn the next text in array in javascript

html

javascript

arrays

fadeout

fadein