javascript - 在jQuery中的文本数组上实现淡入淡出

我有一个要迭代的文本数组，并在jQuery中调用fadeIn和fadeOut函数。

var hellos = ["hi, i'm", "bonjour, je m'appelle", "hallo, ich heiße"]

html代码如下所示：

<h2><span id="hellos"></span>Ch1maera</h2>

理想情况下，在我网站的首页上，它会显示“ hi，i'm ch1maera”之类的内容，然后循环显示不同的问候，将其淡入然后淡出，同时在屏幕上保留“ ch1maera”。如果可能的话，我想将“ ch1maera”与hello隔离开来，以便它位于同一位置，并且不会移动，具体取决于列表中hello的长度，如果可以的话。怎么做？

最佳答案

您可以将text-align的h2设置为right，以使Ch1maera不会被问候打扰。

var hellos = ["hi, i'm", "bonjour, je m'appelle", "hallo, ich heiße"];
var index = 0;                                // index of the currently displayed hello
$("#hellos").text(hellos[0]);                 // start by showing a hello

(function animate() {                         // the function responsibe for the animation
  $("#hellos").fadeOut(1000, function() {     // first fadeOut #hellos
    index = (index + 1) % hellos.length;      // when fadeOut complete, increment the index (check if go beyond the length of the array)
    this.textContent = hellos[index];         // change text accordingly
  }).fadeIn(1000, animate);                   // then fadeIn. When fadeIn finishes, call animate again
})();

h2 {
  text-align: right;
  padding-right: 40%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2><span id="hellos"></span> Ch1maera</h2>

关于javascript - 在jQuery中的文本数组上实现淡入淡出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43702061/