JavaScript Text Transition

0

Я пытаюсь сделать слайд-шоу из текста, в котором один фрагмент текста исчезает, а другой исчезает и т.д. У меня он работает по большей части, но есть небольшая проблема.

Когда страница сначала загружается, все части текста отображаются сразу. Каждый из них исчезает по очереди, и как только они все исчезли, как только они будут работать, как я хочу. Я использовал:

(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?

Теги:
text
transition
fade

2 ответа

3
Лучший ответ

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

1

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню