JavaScript文本转换

我试图用文本制作幻灯片，其中一段文本淡出，另一段淡入，以此类推。我有它的大部分工作，但有一个小问题

当第一次加载页面时，所有文本都会立即显示。每一个都会依次消失，一旦它们都消失了，一旦它们发挥了我想要的作用。我使用了：

(function langFade() {

var lang = $('.lang, .first');
var langIndex = -1;

function showNextLang() {
    ++langIndex;
    lang.eq(langIndex % lang.length)
        .fadeIn(1500)
        .delay(2000)
        .fadeOut(1500, showNextLang);
}

showNextLang();

})();

如上所述，但这会导致上述问题。我曾尝试在加载站点时使用CSS隐藏除第一段文本以外的所有文本，但这并没有起作用。我怀疑问题出在HTML上——它与演示完全不同。我必须证明我的意思

---

有没有办法通过修改JavaScript或HTML来解决这个问题

首先尝试使用.not（“：eq（0）”.hide（）隐藏其他对象

---

也可以使用.not（“：first”）.hide（），这可能更容易阅读。

首先尝试使用.not（“：eq（0）”.hide（）隐藏其他内容

---

也可以使用.not（“：first”）.hide（），这可能更容易阅读。

只需在开始时隐藏它们。这可以在纯CSS中完成。添加以下类：

h2.first, h2.lang {
    display: none 
}

---

演示：

最初只需隐藏它们。这可以在纯CSS中完成。添加以下类：

h2.first, h2.lang {
    display: none 
}

演示：