Jquery--实现带光标的打字效果

<html>
<head>
  <style>
.container{
            float: left;
            display: inline-block;
            position: relative;
        }
        @keyframes blink-caret { 50% { background-color: transparent; } }
        span{
            animation:blink-caret 1s step-end infinite;
            width: 3px;
            height: 20px;
            background-color: #000;
            float: left;
            position: absolute;
            right: -10px;
        }
 
  </style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
 
<div class="container"></div>
 
<script>
var s = 'Welcome to LoVueAn';
    var con = $('.container');
    var index = 0;
    var length = s.length;
    var tId = null;
  
    function start(){
        con.text('');
        con.append('<span></span>');
        tId=setInterval(function(){
            con.append(s.charAt(index));
            if(index++ === length){
                clearInterval(tId);
                index = 0;
                start()
            }
        },400);
    }
  
    start();
    </script>