[聚合文章] 最简单实用的JQuery实现banner图中的text打字动画效果！！！

下面，就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果，最简单实用的方法（鉴于代码量较小，就内嵌在一个HTML文件中了）：

首先，我们要在header导入一个jQuery，并新建一个CSS标签，在body部分建立一个外层的div，取一个ID，里面再建立一个内层的div，取一个ID，内层div里，新建一个h1标签和一个p标签，将您显示的文字放到里面，示例代码如下:

<div id="table">
			
			<div id="centeralign">
				<h1 id="h1">Sample typing effect.</h1>
				<p>Lorem ipsum dolor sit amet  放入您的文字</p>
			</div>
			
		</div>

下面，在CSS标签中修改body部分的布局样式，小博使用了简单有效的 弹性布局 来实现的，效果图及代码如下：

代码如下， 注意布局完成之后要先将p标签none掉 :

<style type="text/css">
			body,
			html {
				margin: 0;
				height: 100%;
				font-family: 'Oxygen Mono', monospace;
				color: #999;
			}

			#table {
				
				width: 100%;
				height: 100%;
				background-color: #e5e5e5;
			}
			
			#centeralign {
				width: 100%;
				height: 100%;
				display: flex;				
				flex-direction:column;
				align-items: center;
				justify-content: center;	
			}
			#centeralign h1 {
				display: inline-block;
				text-transform: uppercase;
				letter-spacing: 1pt;
				font-size: 30pt;
				margin-bottom: 15px;
			}
			
			#centeralign p {
				text-align: left;
				margin: 0;
				text-transform: lowercase;
				font-size: 10pt;
				font-weight: 900;
				width: 50%;
				display: none;
			}
		</style>

接下来在body的里面，新建一个JS标签，利用 定时器和延时器 来实现banner中的文字动画效果:

主要有两点:

1：声明一个函数，传入两个参数  元素：element ； 速度：speed。

定义：①var text = $(element).text();

②$(element).html('');

③var i = 0;

此函数取到了，全局的text，利用延时器延迟出现每个字符，但是h1标签会和

2：利用延时器，将h1和p标签，延时分别打印，即将h1标签的文字，打印完成之后，再执行p标签的打印工作；

定义：①定义  var  speed = 75  (数值可以自己定义)；

② 定义一个变量   var delay = $('h1').text().length * speed ;------------取到h1打印完成的时间

③ 定义p标签的一个延时器，延时时间即为h1标签的打印完成时间， 这里不要忘记把CSS中none掉的p标签，取到display，设为inline-block ；

④ 将打印速度通过函数传参，分别将speed赋给h1和p标签；

JS完整代码如下：

<script>
			function typeEffect(element, speed) {
				var text = $(element).text();
				$(element).html('');
				var i = 0;
				var timer = setInterval(function() {
					if (i < text.length) {
						$(element).append(text.charAt(i));
						i++;
					} else {
						clearInterval(timer);
					}
				}, 30);
			}
			$(document).ready(function() {
				var speed = 75;
				var delay = $('h1').text().length * speed ;
				typeEffect($('h1'), speed);
				setTimeout(function() {
					$('p').css('display', 'inline-block');
					typeEffect($('p'), speed);
				}, delay);
			});
		</script>

那么，一个简单实用的banner图的文字动画效果，就完成了。希望各位博主，能对小博提出建议，不断完善修改，小博定当虚心修改，不断进步。