(function($) {
var logo = $("#logo"),
originalText = logo.html(),
altLogoTextArray = ["make it count.", "make peace.", "make art not war.", "make something out of yourself."],
chosenText,
timeOut = null;
function animateText(text, startFrom, length, delay) {
var strlen = text.length;
if (startFrom + length > strlen) {
return;
}
timeOut = window.setTimeout(function() {
logo.html(text.substr(0, startFrom) + text.substr(startFrom, length));
//testText.html(startFrom + length);
animateText(text, startFrom, length + 1, delay);
}, delay);
}
function getRandomTextFromArray(arr) {
var arrLength = arr.length,
randInt = Math.floor(Math.random() * (arrLength - 0)) + 0;
return arr[randInt];
}
logo.on('mouseenter mouseleave', function(e) {
window.clearTimeout(timeOut);
if (e.type == "mouseenter") {
chosenText = getRandomTextFromArray(altLogoTextArray);
animateText(chosenText, 3, 0, 20);
} else if (e.type == "mouseleave") {
animateText(originalText, 3, 0, 20);
}
});
})(window.jQuery);
#logo {
font-size: 30px;
min-width: 500px;
display: inline-block;
zoom: 1;
cursor: pointer;
}
#logo:after {
content:"";
display:block;
height:1px;
width:22px;
background:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="logo">marie forleo.</span>