最简单实用的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:;

                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:;

                text-transform: lowercase;

                font-size: 10pt;

                font-weight:;

                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图的文字动画效果，就完成了。希望各位博主，能对小博提出建议，不断完善修改，小博定当虚心修改，不断进步。　