Jquery擦除带有类型效果的文本

Question

我写了一些脚本来添加带有输入效果的文本。 我需要删除类似该效果的文本，但不知道该怎么做。 如果可以请帮助。

JS代码：

var title = $(".form-title").attr("data-title");

$.each(title.split(''), function (i, letter) {
    setTimeout(function () {
         console.log(letter);
        $('.form-title').html($('.form-title').html() + letter);
    }, 500 * i);
});

的jsfiddle

Answer 1

 var title = $(".form-title").attr("data-title"); var interval = 200; var wait = interval + (interval * title.length); $.each(title.split(''), function (i, letter) { setTimeout(function () { $('.form-title').html($('.form-title').html() + letter); }, interval * i); }); var i = title.length; while(i >= 0){ setTimeout(function () { var text = $('.form-title').html(); var length = text.length - 1; $('.form-title').html(text.substring(0, length)); }, wait + (interval * i) ); i--; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <h2 class="form-title" data-title="Dear Concept Studio,"></h2> 

Answer 2

使用以下JavaScript。 请在下面查看演示

 var title = $(".form-title").attr("data-title"); $.each(title.split(''), function (i, letter) { setTimeout(function () { if(title.length-i!=1) { $('.form-title').html(title.substring(0,title.length-i)); } else { $('.form-title').html(title.substring(0,title.length-i)); setTimeout(function() { $('.form-title').html(""); },500); } }, 500 * i); }); $('.form-title').html("") 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2 class="form-title" data-title="Dear Concept Studio,"></h2> 

Answer 3

您可以在每次迭代时修剪HTML内容的最后一个字母。

例如：

$('.form-title').html($('.form-title').html().substring(0, title.length-1-i));

https://jsfiddle.net/ecvbL0f7/2/

Answer 4

如果你已有文字：

<h2 class="form-title">Dear Concept Studio</h2>

然后你会删除它：

var H2 = $("h2");
var H2Length = H2.text().length;

$.each(H2.text().split(''), function (i, letter) {
    setTimeout(function () {
         console.log(H2.text().substring(0,H2Length-1));
        H2.text(H2.text().substring(0,H2Length-1));
        H2Length--;
    }, 500 * i);
});

Answer 5

你去，给你一个片段：

var 
    $title = $("h2");


var func = function() {

    $title.text($title.text().substring(0, $title.text().length - 1));

    if ($title.text().length > 0) {
        setTimeout(func, 100);
    };
};

func();


http://jsfiddle.net/ucvvegay/7/ 

在jsFiddle上

Answer 6

试试这样，

var title = $(".form-title").attr("data-title");
var leng = title.split('').length-1;
$.each(title.split(''), function (i, letter) {
setTimeout(function () {
    // console.log(letter);
    if(i===leng){deleting()}
    $('.form-title').html($('.form-title').html() + letter);
}, 500 * i);      

});
function deleting (){
var text = $('.form-title').html();    
var length = text.length-1;
$.each(text.split(''),function(i,letter){        
    setTimeout(function () {                        
    $('.form-title').html(text.substring(0,length-i));
},500*i);
});
}

https://jsfiddle.net/ucvvegay/9/

Answer 7

这是JS代码，用于动画打字效果然后擦除它并显示闪烁的光标 。 您可以进一步调整代码。
学分归原作者Simon Shahriver所有 。

这是小提琴： https ： //codepen.io/jerrygoyal/pen/vRPpGO

 var TxtType = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.tick(); this.isDeleting = false; }; TxtType.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; var that = this; var delta = 200 - Math.random() * 100; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta); }; window.onload = function() { var elements = document.getElementsByClassName('typewrite'); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-type'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtType(elements[i], JSON.parse(toRotate), period); } } }; 

 body { background-color:#ce6670; text-align: center; color:#fff; padding-top:50px; } * { color:#fff; text-decoration: none;} .wrap{ animation: caret 1s steps(1) infinite; border-right: 0.08em solid #fff; padding-right: 1px; } @keyframes caret { 50% { border-color: transparent; } } 

 <h1> <a href="" class="typewrite" data-period="2000" data-type='[ "Hi, I am Jerrygoyal.", "I am Creative.", "I Love Design.", "I Love to Develop." ]'> <span class="wrap"></span> </a> </h1>