jQuery текстовый эффект, где слова появляются одно за другим

Question

Меня спросили, могу ли я придумать текстовый эффект в HTML, используя jQuery, где я получаю строку, а затем процедура автоматически обнаруживает слова и анимирует каждое слово, по одному за раз.

Как.

1. сек в анимационных шоу: «Happy»

2. сек в анимационных шоу: «Happy New»

3. сек в анимационных шоу: «С Новым годом»

4. сек в анимационных шоу: «С Новым 2011 годом»

каждое слово должно медленно "исчезать / оживлять", я думал, что простая скользящая панель, идущая прямо в пикселях, будет удовлетворительной - но нет.Слово за словом.

Мне могут понадобиться некоторые идеи по этому вопросу.Я знаю немного jQuery и много Javascript, поэтому я думаю, что мне нужно немного помочь с частью jQuery.

Для списка слов я бы просто разделил на "" (пробел) и принял это ",.!»и т.д. являются частью слова.

Но как мне анимировать этот "динамический массив" в jQuery - есть ли где-нибудь плагин или я первый?

Я думал, что, возможно, маркированныйСписок тоже может быть хитростью, затем сделайте так, чтобы он плавал горизонтально, как меню, и затем добавляйте слово как новый маркер, один раз в секунду.Но я рад видеть, что эксперты здесь придумывают для решения.: O)

РЕДАКТИРОВАТЬ Из отмеченного ответа у меня есть это:

    var str = $('div#greeting h1').html(); // grab text
    $('div#welcome h1').html(""); // clear text

    var spans = '<span>' + str.split(" ").join(' </span><span>') + '</span>';
    $(spans).hide().appendTo('div#greeting h1').each(function(i)
    {
        $(this).delay(500 * i).fadeIn();
    });

Тег STRONG работает, но некоторые части текста исчезают в группе.

Попробуйте: «Вот тестовый текст. [Strong] Мы считаем, что это лучше [/ strong], чем когда-либо».и вижу проблему.

Answer 1

Рабочий пример: http://jsfiddle.net/TcdQb/

var str = $('span.ticker').text();

var spans = '<span>' + str.split(/\s+/).join(' </span><span>') + '</span>';

$(spans).hide().appendTo('body').each(function(i) {
    $(this).delay(1000 * i).fadeIn();
});

• Это помещает слова в теги span: "<span>Happy </span><span>New </span><span>Year </span><span>2011</span>"

• Создает элементы DOM: $(spans)

• Скрывает их: .hide()

• Добавляет их: .appendTo('body')

• Наконец, итерирует их, используя .each() и .delay() .fadeIn() каждого из них на 1000 мс, умноженные на текущий индекс итерации.

---

РЕДАКТИРОВАТЬ: Вот обновление для примера, который использует более короткую задержку и более длинную анимацию, поэтому анимации немного перекрываются.

http://jsfiddle.net/TcdQb/1/

    $(this).delay(400 * i).fadeIn(1000);

---

РЕДАКТИРОВАТЬ: Чтобы иметь дело с вложенными тегами (только один уровень глубины), вы можете сделать это:

http://jsfiddle.net/WgMrz/

var h1 = $('div#greeting h1');

h1.hide().contents().each(function() {
    var words;
    if (this.nodeType === 3) {
        words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>';
        $(this).replaceWith(words);
    } else if (this.nodeType === 1) {
        this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';
    }
});

   // Remove any empty spans that were added
h1.find('span').hide().each(function() {
    if( !$.trim(this.innerHTML) ) {
        $(this).remove();
    }
});

h1.show().find('span').each(function(i) {
    $(this).delay(400 * i).fadeIn(600);
});

Answer 2

Я не эксперт, но, может быть, вы думаете об этом. Как насчет:

   var fadeWordsIn = function(elem$) {
      var txt = elem$.text().split(' ');
      elem$.empty();
      var pushIt = function() {
          if (txt.length) {
              var word = txt.shift();
              var span$ = $("<span>" + word + " </span>");
              elem$.append(span$);
              span$.hide().fadeIn(1000, pushIt);
          }
       };
       pushIt();
  };

Answer 3

Вы хотите анимацию "BlockFadeIn by word" здесь: http://dev.seankoole.com/jquery/ui-effect/text.html

Только что выпущено!