尝试在点击时销毁或重启typeIt.js的问题

Question

我正在努力实现typeItjs的destroy / restart / reset函数。

我有4个按钮，每个按钮应有更好的反应。 -每次单击按钮时，我想重新启动typeit函数。是否可以淡出其他信息并从头开始显示新信息？

如果有人熟悉typeit.js，那就太好了

var boxLists = $('.box-lists a');
boxLists.click( function() { 
    if (!$(this).hasClass('active')) {
        boxLists.removeClass('active');
        $(this).addClass('active');  
    }  
}); 

var btnAlana01 = document.getElementById('btnalana01');
var btnAlana02 = document.getElementById('btnalana02');
var btnAlana03 = document.getElementById('btnalana03');
var btnAlana04 = document.getElementById('btnalana04');


    btnAlana01.onclick = function(e)  {
            TweenMax.to('#chat-alana02', 0.2, {autoAlpha:0});
            TweenMax.to('#chat-alana03', 0.2, {autoAlpha:0});
            TweenMax.to('#chat-alana04', 0.2, {autoAlpha:0});
            TweenMax.to('#alana', 0.2, {autoAlpha:0 });
            alana01.init(); 
            TweenMax.to('#chat-alana01', 0.2, {autoAlpha:1});
          };
    btnAlana02.onclick = function(e)  {
      TweenMax.to('#chat-alana01', 0.2, {autoAlpha:0 });
      TweenMax.to('#chat-alana03', 0.2, {autoAlpha:0 });
      TweenMax.to('#chat-alana04', 0.2, {autoAlpha:0 });
      TweenMax.to('#alana', 0.2, {autoAlpha:0 });
      alana02.init(); 
      TweenMax.to('#chat-alana02', 0.2, {autoAlpha:1});
    };
    btnAlana03.onclick = function(e)  {
      TweenMax.to('#chat-alana01', 0.2, {autoAlpha:0 });
      TweenMax.to('#chat-alana02', 0.2, {autoAlpha:0 });
      TweenMax.to('#chat-alana04', 0.2, {autoAlpha:0 });
      TweenMax.to('#alana', 0.2, {autoAlpha:0 });
      alana03.init();
      TweenMax.to('#chat-alana03', 0.2, {autoAlpha:1});
    };
    btnAlana04.onclick = function(e)  {
      TweenMax.to('#chat-alana01', 0.2, {autoAlpha:0 });
      TweenMax.to('#chat-alana02', 0.2, {autoAlpha:0 });
      TweenMax.to('#chat-alana03', 0.2, {autoAlpha:0 });
      TweenMax.to('#alana', 0.2, {autoAlpha:0 });
      alana04.init();
      TweenMax.to('#chat-alana04', 0.2, {autoAlpha:1});
    };



    var alana01 = new TypeIt('#chat-alana01', {
			    strings: ["Things are looking really good, Susan.", "Do you need a detailed profit and loss breakdown?", "Or would you like to access some funds?"],
			    breakLines: false,
			  	autoStart: false,
			  	loop: false,
			  	 afterComplete: function (instance){
			  	 	 
			  	 }
			}, false); 
	 
	 
		var alana02 = new TypeIt('#chat-alana02', {
		    strings: ["How can I help you today? ", "The bank is committed to growing your business.", "Let's talk about how much you need Mr Carrington.","Firstly, in which area do you mean to invest?"],
		    breakLines: false,
		  	autoStart: false,
		  	loop: false,
		  	 afterComplete: function (instance) {
		  	 	//alana02.restart();
		  	 }
		}, false);

	 	 
		var alana03 = new TypeIt('#chat-alana03', {
		    strings: ["How can I help you today? ", "The US dollar is up almost 2 cents on the euro today.", "Do you need to compare it to other currencies?", "Just say if you meant the Australian dollar!"],
		    breakLines: false,
		  	autoStart: false,
		  	loop: false,
		  	 afterComplete: function (instance) {
		  	 	//alana03.restart();
		  	 }
		  	 
		}, false);

	 	 	 
		var alana04 = new TypeIt('#chat-alana04', {
		    strings: ["How can I help you today? ", "Sure Joe, I can do that for you right now", "I'll just need to ask you a security question.", "Firstly though, what's  the recipient's name?"],
		    breakLines: false,
		  	autoStart: false,
		  	loop: false,
		  	 afterComplete: function (instance) {
		  	 	//alana04.restart();
		  	 }
		  	 
		}, false);

* {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-weight: 300;
}

em {
  font-weight: bold;
}

body {
  height: 100vh;
  margin: 0;
  padding: 50px;
  background: linear-gradient(45deg, rgba(128, 128, 128, 0.01), rgba(128, 128, 128, 0.15));
}

h1 {
  font-size: 40px;
  margin: 0;
}

a {
  cursor: pointer;
  bottom: 25px;
  font-size: 16px;
  font-weight: bold;
  color: #e41f08;
  text-decoration: none;
  font-weight: 100;
  font-family: Verdana, Geneva, sans-serif;
}
a:hover {
  color: #9b1505;
}

.chat-container {
  position: relative;
  right: 0;
  top: 0;
  border: 1px solid red;
  width: 500px;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/5.10.6/typeit.min.js"></script>

<ul class="box-lists">
<li><a class="btn" id="btnalana01">button 1</a></li>
<li><a class="btn" id="btnalana02">button 2</a></li>
<li><a class="btn" id="btnalana03">button 3</a></li>
<li><a class="btn" id="btnalana04">button 4</a></li>
</ul>


<div class="chat-container">
<h2 id="alana"></h2>
<h2 id="chat-alana01"></h2>
<h2 id="chat-alana02"></h2>
<h2 id="chat-alana03"></h2>
<h2 id="chat-alana04"></h2>
</div>