Question

我试图用文字制作幻灯片，其中一段文字淡出，另一段淡入，依此类推。我大部分都在工作，但是有一个小问题。

首次加载页面时，会立即显示所有文本。每一个都会逐渐消失，一旦它们全部消失，一旦它们按照我想要的功能消失。我用过：

(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();

})();

如here所述，但这导致了上述问题。我已经尝试使用CSS在网站加载时隐藏除第一段文本之外的所有文本，但这不是诀窍。我怀疑问题在于HTML - 它与演示有很大的不同。我created a fiddle来证明我的意思。

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

Answer 1

首先尝试使用.not（'：eq（0）'）隐藏其他人.hide（）

(function langFade() {

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

lang.not(':eq(0)').hide();

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

showNextLang();

})();

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

Answer 2

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

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

演示：http://jsfiddle.net/XbWJS/2/

JavaScript文本转换

2 个答案: