解决方法
只是一个简单的方法:
var $typer = $('.typer'),txt = $typer.data("text"),tot = txt.length,ch = 0; (function typeIt() { if(ch > tot) return; $typer.text( txt.substring(0,ch++) ); setTimeout(typeIt,~~(Math.random()*(300-60+1)+60)); }());
/* PULSATING CARET */ .typer:after { content:""; display: inline-block; vertical-align: middle; width:1px; height:1em; background: #000; animation: caretPulsate 1s linear infinite; -webkit-animation: caretPulsate 1s linear infinite; } @keyframes caretPulsate { 0% {opacity:1;} 50% {opacity:1;} 60% {opacity:0;} 100% {opacity:0;} } @-webkit-keyframes caretPulsate { 0% {opacity:1;} 50% {opacity:1;} 60% {opacity:0;} 100% {opacity:0;} }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="typer" data-text="Hi! My name is Al. I will guide you trough the Setup process."></span>
所以基本上,jQuery获取元素的数据文本,逐字插入,并且脉冲“插入符号”不是CSS3动画的:在该SPAN的元素之后.
原文地址:https://www.jb51.cc/jquery/179508.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。