Get the App
SLTechnology News&Howtos  ›  Development  › 

How to realize typewriter effect with jQuery

Shulou Source: shulou.com Published: 2022-06-01 02:19:18 10月03日 Update

This article mainly introduces the jQuery how to achieve typewriter effect related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this jQuery how to achieve typewriter effect article will have a harvest, let's take a look at it.

Example code:

A rain trapped me here.

Your gentle expression

It makes me sad.

The rain in June is just a ruthless you.

Fn.autotype = function () {var $text = $(this); console.log ('this',this); var str = $text.html (); / / returns the content of the selected element var index = 0; var x = $text.html ('') There is a difference between / / $text.html () and $(this) .html ('') the var timer = setInterval (function () {/ / substr (index, 1) method extracts the character var current = str.substr (index, 1) starting from the index subscript in the string; if (current = ='', index) + 1;} else {index + + } / / console.log (["characters under 0 to index", str.substring (0, index)], ["symbol", index & 1?'_':']); / / substring () method is used to extract the character $text.html (str.substring (0, index) + (index & 1?'_':'') that mediates between two specified subscripts) If (index > = str.length) {clearInterval (timer);}}, 100);}; $("# autotype"). Autotype (); this is the end of the article on "how to achieve typewriter effect in jQuery". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve typewriter effect in jQuery". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Tags: Characters typewriters effects typing subscript content strings knowledge methods articles sad gentle two between code value location elements just examples Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Apple MySQL Redmi Shulou Technology Shulou Information