jquery - 动画占位符文本？

Question

任何人都可以帮助我将我的文本动画添加到我创建的表单中吗？

当您刷新页面时，文本当前会呈现动画效果，虽然我需要它像表单中的占位符一样工作，但效果很好。

一旦用户点击表单，文本需要消失，以便用户能够正常搜索。

请看我的Fiddle

如果有人可以提供帮助，请更新 fiddle ，非常感谢您的帮助!

var txt = $('.writer').text();
var timeOut;
var txtLen = txt.length;
var char = 0;
$('.writer').text('|');
(function typeIt() {   
    var humanize = Math.round(Math.random() * (200 - 30)) + 30;
    timeOut = setTimeout(function() {
        char++;
        var type = txt.substring(0, char);
        $('.writer').text(type + '|');
        typeIt();

        if (char == txtLen) {
            $('.writer').text($('.writer').text().slice(0, -1)); // remove the '|'
            clearTimeout(timeOut);
        }

    }, humanize);
}());

Answer 1

给你

Fiddle Demo

基本上，在 'var txt' 中包含自定义文本，而不是查找 DOM 来获取文本。