JavaScript Text Transition

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

Try, чтобы скрыть другие сначала с .NOT. (': Эк (0)') скрыть()

(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 (': первый'). Скрыть(), который может быть немного легче читать.

Answer 2

Просто скройте их на начальном этапе. И это можно сделать в чистом CSS. Добавить следующий класс:

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

Демо: http://jsfiddle.net/XbWJS/2/