Typewriting effect with jquery

Script

// Home typewriting effect

(function(){
    var srcText = $("#src").text().trim();
    i = 0;
    result = srcText[i];
    setInterval(function() {
        if(i == srcText.length-1) {
            clearInterval(this);
            return;
        };
        i++;
        result += srcText[i];
        $("#target").text(result);

    }, 150); // the period between every character and next one, in milliseonds.
})();



Html

<p id="src">
amitpal
</p>
<p id="typed-paragraph">
    <span id="target"></span>
    <span id="typed-cursor">|</span>

</p>


CSS

#src {
    display: none;

}

#typed-paragraph {
    position: absolute;
    top: 0;
}

#target {
    white-space: pre;
}

#target, #typed-cursor {
    color: #505050;
    font-family: monospace;
    line-height: 1.5;
    font-size: 1.5em;
}

#typed-cursor {
    opacity: 1;
    font-weight: 800;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    -ms-animation: blink 0.7s infinite;
    -o-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

@-keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@-moz-keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@-ms-keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@-o-keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}