<div class="show"> <div class="text">Chào mừng bạn đến vơi Cáo Đêm, chúc bạn một ngày tốt lành :)</div> </div>
Cấu trúc HTML gồm hai thẻ div bao bọc bên ngoài nội dung
<script> function autoType(elementClass, typingSpeed){ var thhis = $(elementClass); thhis.css({ "position": "relative", "display": "inline-block" }); thhis.prepend('<div class="cursor" style="right: initial; left:0;"></div>'); thhis = thhis.find(".text"); var text = thhis.text().trim().split(''); var amntOfChars = text.length; var newString = ""; thhis.text("|"); setTimeout(function(){ thhis.css("opacity",1); thhis.prev().removeAttr("style"); thhis.text(""); for(var i = 0; i < amntOfChars; i++){ (function(i,char){ setTimeout(function() { newString += char; thhis.text(newString); },i*typingSpeed); })(i+1,text[i]); } },1500); } $(document).ready(function(){ autoType(".show", 90); }); </script>
Code jQuery tạo hiệu ứng như đang nhập liệu