在 jQuery 中对文本数组实现淡入淡出

Question

我有一个文本数组，我想遍历这些文本并在 jQuery 中调用淡入淡出和淡出函数。

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

html 代码如下所示：

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

理想情况下，在我网站的首页上，它会读到类似“嗨，我是 ch1maera”的内容，然后循环显示不同的问候语，将它们淡入淡出，同时在屏幕上留下“ch1maera”。如果可能的话，我想将“ch1maera”与 hellos 隔离，以便它保持在同一个位置并且不会根据列表中 hellos 的长度而移动，如果这是有道理的。这将如何完成？

Answer 1

您可以将text-alignof设置为h2，right这样Ch1maera就不会被 hellos 感动。

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>