Я пытаюсь сделать слайд-шоу из текста, в котором один фрагмент текста исчезает, а другой исчезает и т.д. У меня он работает по большей части, но есть небольшая проблема.
Когда страница сначала загружается, все части текста отображаются сразу. Каждый из них исчезает по очереди, и как только они все исчезли, как только они будут работать, как я хочу. Я использовал:
(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()
(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(), который может быть немного легче читать.
Сначала просто скройте их. И это можно сделать в чистом CSS. Добавьте следующий класс:
h2.first, h2.lang {
display: none
}