Question

我尝试显示带有输入文字效果的文字。我试过这样

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<span id="holder"></span>

</body>
<script>
(function($) 
 {
    $.fn.writeText = function(content) {
        var contentArray = content.split(""),
            current = 0,
            elem = this;
        setInterval(function() {
            if(current < contentArray.length) {
                elem.text(elem.text() + contentArray[current++]);
            }
        }, 100);
    };

})(jQuery);
$("#holder").writeText("This is some text");

</script>
</html>

它的工作，但我需要显示这样的段落内容，但现在要在writeText中调用段落内容。

如果显示Pragraph

就像打字效果一样不好。请告诉我如何解决我的问题。请给我任何想法。

感谢高级。

Answer 1

我只是修改了你的代码，你只需要获取每个para的内容并将每个para传递给你的writeText函数（）

只要给出课程=＆＃34;效果＆＃34;到

动画

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<span id="holder"></span>
<p class="effect">Hi, this is Gokul Praveen' PARA 1!</p>
<p class="effect">Hi, this is James Bond's PARA 2!</p>
</body>
<script>
(function($) 
 {
    $.fn.writeText = function(content) {
        var contentArray = content.split(""),
            current = 0,
            elem = this;
        setInterval(function() {
            if(current < contentArray.length) {
                elem.text(elem.text() + contentArray[current++]);
            }
        }, 100);
    };

})(jQuery);

$(".effect").each(function(index) {
    var text = $( this ).text();
    $(this).empty();
    $(this).writeText(text);
});
//$("#holder").writeText("This is some text");

</script>
</html>

在浏览器中执行代码并检查。不要忘记将其标记为正确！

Answer 2

我认为这个小提琴会起作用

Js Fiddle

$.fn.typer = function (text, options) {
        options = $.extend({}, {
            char: ' ',
            delay: 1000,
            duration: 600,
            endless: true
        }, options || text);

        text = $.isPlainObject(text) ? options.text : text;

        var elem = $(this),
            isTag = false,
            c = 0;

        (function typetext(i) {
            var e = ({
                string: 1,
                number: 1
            }[typeof text] ? text : text[i]) + options.char,
                char = e.substr(c++, 1);

            if (char === '<') {
                isTag = true;
            }
            if (char === '>') {
                isTag = false;
            }
            elem.html(e.substr(0, c));
            if (c <= e.length) {
                if (isTag) {
                    typetext(i);
                } else {
                    setTimeout(typetext, options.duration / 10, i);
                }
            } else {
                c = 0;
                i++;

                if (i === text.length && !options.endless) {
                    return;
                } else if (i === text.length) {
                    i = 0;
                }
                setTimeout(typetext, options.delay, i);
            }
        })(0);
    };

    $('#foo').typer(['<i>Anyone</i> <u>is</u> <b>awesome</b>!', 'Foo bar.', 1337]);

如何将段落文本显示为文本输入效果

2 个答案: