Geek Answers Handbook

JQuery erases text with type effect

I am writing a few script to add text with input effect. I need to delete text like this effect, but donโ€™t know how to do it. If it can help.

JS Code:

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

+5
source share
6 answers

 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>
+3
source

use the following javascript. Check out the demo and in the below

 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>
+2
source

You can trim the last letter of the HTML content with each iteration.

For instance:

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

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

+1
source

If you already have the text:

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

Then you delete it using this:

 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); });
+1
source

Here is a snippet for you:

 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/

on jsFiddle

+1
source

Try it,

 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/

+1
source

More articles:


All Articles