Typing effect

HTML

<div class="textbox">
    <p><span class="text"></span><span class="SecondStyle"></span><span class="ThirdStyle"></span></p>
</div>

CSS

p {
    line-height: 85px;
}
.textbox {
    text-align: center;
    margin-top: 40%;
}
.SecondStyle {
    font-size: 50px;
}
.ThirdStyle {
    font-size: 50px;
    color: red;
}

JavaScript

var text = "Welcome to ";
var logo = "Chasing ";
var i = 0;
var j = 0;
var speed = 100;

function writeLogo() {
    var currentLetter = logo.charAt(j);
    j++;
    $('.SecondStyle').append(currentLetter);
    if (j == logo.length) {
        clearInterval(timerLogo);
        $('.ThirdStyle').append('E');
        setTimeout(function () {
            $('.ThirdStyle').append('D');
        }, speed);
    }
}

function writeLetter() {
    var currentLetter = text.charAt(i);
    i++;
    $(".text").append(currentLetter);
    if (i == text.length) {
        clearInterval(timerId);
        timerLogo();
    }
}

var timerId = function () {
    setInterval(writeLetter, speed);
};

var timerLogo = function () {
    setInterval(writeLogo, speed);
};

$(document).ready(timerId);