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

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

нравится.

  1. сек в анимации показывает: "счастливый"

  2. сек в анимации показывает: "Happy New"

  3. сек в анимации показывает: "С Новым годом"

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

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

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

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

но как оживить этот "динамический массив" в 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], чем когда-либо."и вижу проблему.

6
jquery jquery-animate jquery-plugins

3 ответов

пример: 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() the .fadeIn() каждого из них на 1000 мс, умноженное на текущий индекс итерации.

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

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

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

EDIT: иметь дело с вложенные теги (только один уровень) вы можете сделать это:

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);
});
19

Я не эксперт, но, возможно, вы слишком много думаете об этом. Как насчет:

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

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

только что выпустили!

1