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

演示：Fiddle

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>

用jquery编写文本效果

2 个答案: