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

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

Подобно.

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

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

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

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

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

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

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

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

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

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

    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], чем когда-либо». и вижу проблему.

Ответы на вопрос(3)

Решение Вопроса

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


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);
});
 BerggreenDK05 янв. 2011 г., 22:56
Как бы я инициализировал переменную str, скажем, span / div с классом css с именем eg. "ticker": <span class = "ticker"> С Новым 2011 годом </ span>
 user11371613 янв. 2011 г., 18:26
@BerggreenDK: используется для различения текстового узла и элемента, так как вам нужно немного другой метод для управления их содержимым.Вот список из разных типов узлов. Типы 1 и 3 наиболее вероятны для ссылки..contents() метод похож на.children() за исключением того, что он также получает текстовые узлы. Поэтому, когда мы повторяем, используя.each(), мы проверяем каждый из них, чтобы увидеть, что у нас есть.
 user11371613 янв. 2011 г., 16:55
@BerggreenDK: Просто заметил ваши комментарии. Я еще раз посмотрю. (Кстати, сsplit(/\s+/) вы передаете регулярный экспресс, который говорит"разделить, где найдены один или несколько соседних пробелов".
 BerggreenDK05 янв. 2011 г., 22:52
тоже очень хорошо! Теперь я должен решить, кто должен иметь «ответ» .. Хотел бы я отметить более одного ...
 user11371613 янв. 2011 г., 17:35
@BerggreenDK:Вот обновленный пример. Это будет работать только для тегов, вложенных на один уровень глубиной. Я добавлю это к моему ответу.

   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();
  };
 Malvolio06 янв. 2011 г., 00:33
Спасибо, вот к чему я стремился.
 BerggreenDK05 янв. 2011 г., 22:52
очень красиво, легко читать и понимать.

http://dev.seankoole.com/jquery/ui-effect/text.html

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

 Gregg B05 янв. 2011 г., 19:49
Я случайно прочитал об этом на днях.
 Gregg B05 янв. 2011 г., 23:42
Рад, что вы получили ответ :)
 BerggreenDK06 янв. 2011 г., 00:00
@Malvolio: Я думаю, что вы сделали хорошую попытку, и мне жаль, что я не могу отметить более одного хорошего ответа, но я также проголосовал за вас.
 Malvolio05 янв. 2011 г., 19:45
D'о. Гораздо лучший ответ, чем мой. Моя вина за использование Emacs вместо Google.
 BerggreenDK05 янв. 2011 г., 22:54
Это потрясающая страница с множеством интересных образцов тоже. Но я думаю, что правильный ответ должен быть самым точным в этот раз. И все же спасибо за ссылку. Крутая вещь!

Ваш ответ на вопрос