用jquery编写文本效果

Question

我使用此代码编写文本效果：

        <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>

但它不适用于多行，我使用此代码：

 changeText($("#TypeEffect p, #TypeEffect br"), $(".p2"), 150);

所以，它不起作用。

请帮我多行写文字效果。

Answer 1

尝试

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

演示： 小提琴

Answer 2

尝试这个：

 $("[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>