<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