Ввод текстовой анимации с использованием jQuery

надеюсь, кто-то может мне помочь. Я новичок в jQuery, но я пытаюсь выяснить способ создания анимированного текстового эффекта для всего div-класса! Длинный поиск в Google дал мне только небольшие плагины, хотя они замечательные ... Они просто не делают то, что мне нужно, чтобы делать ... (или у меня просто нет образования, чтобы настроить его) ...Ввод текстовой анимации с использованием jQuery

В принципе, как только загружается страница, мне нужно иметь весь ранее существовавший div-класс внутри блока html (я не хочу, чтобы текст был предоставлен JS) начал «вводить» текст в виде человек будет, сохраняя все CSS внутренних элементов (h1s, h2s, p, spans и т. д.) и в том порядке, в котором они находятся в потоке страницы.

Это файл, я работаю над http://jsfiddle.net/we9d81jf/

var $el = $('.typing'), 
    txt = $el.text(), 
    txtLen = txt.length, 
    timeOut, 
    char = 0; 

$el.text('|'); 

(function typeIt() { 
    var humanize = Math.round(Math.random() * (200 - 30)) + 30; 
    timeOut = setTimeout(function() { 
     char++; 
     var type = txt.substring(0, char); 
     $el.text(type + '|'); 
     typeIt(); 

     if (char == txtLen) { 
      $el.text($el.text().slice(0, -1)); // remove the '|' 
      clearTimeout(timeOut); 
     } 

    }, humanize); 

}());

Любая помощь будет принята с благодарностью!

источник

2015-08-01 IllusionalQuestions

Вы почти там, если хотите увидеть эффекты html-тегов, используйте .html вместо .text(). Обновлено fiddle.

источник

2015-08-01 09:52:16

Проблема с этим - это «<», который появляется первоначально. Дайте мне знать, если это было полезно до тех пор, давайте попробуем решить эту проблему. –

Это выглядит потрясающе. Я знал, что это было что-то настолько маленькое, что я был глуп, чтобы не понять себя ... «<» часть, вероятно, не огромная сделка ... поскольку я, вероятно, ускорю анимацию так что пользователь может даже не увидеть его .... но гипотетически ... скажу, что я хочу, чтобы это на 100% отлично, как мы могли бы исправить эту маленькую проблему? – IllusionalQuestions

Дополнительная помощь в отношении «<», которая появляется изначально .... Я обманывал код, и я думаю, что я только усугубил его ... Я пытаюсь выяснить, создаем ли элементы html в javascript и добавление символов текста исправят эту проблему ... но я даже не могу найти достойный способ сделать это! – IllusionalQuestions

Почему нельзя использовать плагин jQuery, такой как Typed.js. Он отлично работает, «<» и «>» не отображается. Вы также можете погрузиться в source code, чтобы узнать, как он работает.

Это demo (Строка содержит <br>, и вы можете добавить тег, чтобы проверить его).

источник

2016-09-19 01:02:01

Ввод текстовой анимации с использованием jQuery

ответ

Смежные вопросы