Я пытаюсь добиться эффекта машинного письма, и мой контент состоит из множества объектов HTML. Проблема с использованием .html() заключается в том, что, поскольку она выписывает каждую букву за раз, она выберет &
, затем l
, затем t
, затем ;
и, наконец, она изменится на <
.
HTML
<p id="src">
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if lt IE 9]> <html class="no-js lt-ie9"> <![endif]-->
</p>
<p id="typed-paragraph">
<span id="target"></span>
<span id="typed-cursor">|</span>
</p>
CSS
#src {
display: none;
}
JQuery
(function(){
var srcText = $("#src").html();
i = 0;
result = srcText[i];
setInterval(function() {
if(i == srcText.length-1) {
clearInterval(this);
return;
};
i++;
result += srcText[i].replace("\n", "<br />");
$("#target").html(result);
}, 150); // the period between every character and next one, in milliseonds.
})();
Вы можете увидеть его здесь http://jsfiddle.net/j9KF5/9/
Но если я использую .text(), я теряю все разрывы строк.
В конечном счете, как я могу либо исправить проблему с объектами, либо проблему с разрывом строки?