I am use this code for Writing Text Effect:
<script type="text/javascript">
$(document).ready(function () {
function changeText(cont1, cont2, speed) {
var Otext = cont1.text();
var Ocontent = Otext.split("");
var i = 0;
function show() {
if (i < Ocontent.length) {
cont2.append(Ocontent[i]);
i = i + 1;
};
};
var Otimer = setInterval(show, speed);
};
$(document).ready(function () {
changeText($("#TypeEffect p"), $(".p2"), 150);
});
});
</script>
but its not working for multiline, I use this code:
changeText($("#TypeEffect p, #TypeEffect br"), $(".p2"), 150);
so, its not working.
please help me for Writing Text Effect in multi line.
Try
$(document).ready(function () {
function changeText(cont1, cont2, speed) {
var contents = $(cont1).contents().map(function () {
if (this.nodeType == 3) {
if ($.trim(this.nodeValue).length) {
return this.nodeValue.split("")
}
} else {
return $(this).clone().get();
}
}).get();
var i = 0;
function show() {
if (i < contents.length) {
cont2.append(contents[i]);
i = i + 1;
} else {
clearInterval(Otimer)
}
};
var Otimer = setInterval(show, speed);
};
$(document).ready(function () {
changeText($("#TypeEffect p"), $(".p2"), 150);
});
});
Demo: Fiddle
Try this:
$("[class*=autoWrite]").each(function(e){ autoWriteText($(this)); }) function autoWriteText(elm){ var clas = elm.attr("class"); clas = clas.split("-"); var speed = clas[1]; var delay = clas[2]; var txt = elm.html(); elm.html(""); setTimeout(function(){ elm.fadeIn("fast"); txt = txt.split(""); var txtI = 0; var html = ""; var intrvl = setInterval(function(){ html = html + txt[txtI] ; elm.html(html + "_"); txtI = txtI + 1; if(txtI == txt.length){ clearInterval(intrvl); } },speed); },delay) }
.autoWriteText{ display:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <h5 class="autoWrite-10-0" >This element will write a <b>letter every 10 milliseconds</b> in this box, with a <b>delay of 0 milliseconds</b>.</h5> <hr> <h5 class="autoWrite-50-1000" >This element will write a <b>letter every 50 milliseconds</b> in this box, with a <b>delay of 1 second</b>.</h5> <hr> <h5 class="autoWrite-200-3000" >This element will write a <b>letter every 200 milliseconds</b> in this box, with a <b>delay of 3 second</b>.</h5> <hr> <h5 class="autoWrite-500-5000" >This element will write a <b>letter every 500 milliseconds</b> in this box, with a <b>delay of 5 second</b>.</h5> <hr>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.