Javascript-форум - Анимация текста

я гдето нашол вот такой код

<html>
<head>
<style type="text/css">
#example .new { opacity: 0; }
#example .div_opacity {
  -webkit-transition: opacity .1s ease-in-out;
  -moz-transition: opacity .1s ease-in-out;
  -ms-transition: opacity .1s ease-in-out;
  -o-transition: opacity .1s ease-in-out;
  transition: opacity .1s ease-in-out;
  opacity: 1;
}
</style>
</head>

<body>
<div id="example" style="padding:0px 0px 0px 10px; width:350px; display:none;">
text1<br /> 
text2 <br /> 
text3...<br />
text4
</div>

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $.fn.animate_Text = function() {
  var string = this.text();
  return this.each(function(){
   var $this = $(this);
   $this.html(string.replace(/./g, '<span class="new">$&</span>'));
   $this.find('span.new').each(function(i, el){
    setTimeout(function(){ $(el).addClass('div_opacity'); }, 175 * i);
   });
  });
 };
 $('#example').show();
 $('#example').animate_Text();
});
</script>
</body>
</html>

как сделать итерактивную анимация: пока юзер не кликнет по странице будет прорисоваться три точки("...") после "text3" стиратся и опяти прорисоваться? заранее благодарю