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

Question

我有一个文本数组，我想遍历并调用 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 的长度而移动，如果这有意义的话。这将如何完成？

Answer 1

你可以把h2的text-align设置成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>

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

Implementing Fade in Fade Out on Array of Text in jQuery

html

javascript

css

jquery

fadein