I have this function in this fiddle
JavaScript:
var newsTicker = function (ele) {
var eles = ele.find('ul li'),
indexEle = 0,
dataEle = ele.find('.ticker-post'),
rotateChars = function (title) {
dataEle.text('');
indexCut = 0;
rotateCharsTimer = setInterval(function () {
if (dataEle.text().length == title.length) {
clearInterval(rotateCharsTimer);
} else if (dataEle.text().length < title.length) {
text = dataEle.text().concat(title.substr(indexCut, 1));
dataEle.text(text);
};
if (title.length - 1 > indexCut) indexCut++;
else indexCut = 0;
}, 90);
},
loopLs = function () {
loopEle = eles.get(indexEle);
eleHref = $(loopEle).data('href');
eleTitle = $(loopEle).data('title');
dataEle.attr('href', eleHref);
if (typeof rotateCharsTimer != 'undefined') {
dataEle.fadeOut();
clearInterval(rotateCharsTimer);
}
dataEle.fadeIn();
rotateChars(eleTitle);
if (eles.length - 1 > indexEle) indexEle++;
else indexEle = 0;
}
loopLs();
setInterval(function (){loopLs()},9400);
}
HTML:
<div id="news-ticker">
<div class="ticker-title">Breaking News:</div>
<ul>
<li data-href="#1" data-title="No 10 armed police arrested over hardcore pornography"></li>
<li data-href="#2" data-title="EDF extends life of UK nuclear plants"></li>
<li data-href="#3" data-title="Superwoman Stephanie Flanders on how to do it all"></li>
<li data-href="#4" data-title="Will Liverpool deliver for Suárez? Can Arsenal last?"></li>
</ul>
<a class="ticker-post"></a>
</div>
Is this the best way to do this?