я гдето нашол вот такой код
<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" стиратся и опяти прорисоваться? заранее благодарю