I have this function in this fiddleJavaScript: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 Surez? Can Arsenal last?></li>    </ul>    <a class=ticker-post></a></div>Is this the best way to do this?
Create news ticker animation
javascript;jquery
The HTML markup should be semantic, such that it degrades gracefully in the absence of JavaScript:<ul>  <li><a href=#1>No 10 armed police arrested over hardcore pornography</a></li>  <li><a href=#2>EDF extends life of UK nuclear plants</a></li>  <li><a href=#3>Superwoman Stephanie Flanders on how to do it all</a></li>  <li><a href=#4>Will Liverpool deliver for Surez? Can Arsenal last?</a></li></ul>To make that work, the CSS should not contain a ul { display: none } rule.  Instead, the JavaScript code should be responsible for suppressing the normal display.You have a bug in the timing that causes each ticker item to briefly fade out and fade in again, causing an undesirable flashing effect.  The problem is that you don't wait for the fade-out to complete before proceeding.  The fix is to use the complete callback of .fadeOut().  In order to fade out the correct element, it's easier to hang on to a $current jQuery object, advancing it only after the fade-out has completed.You forgot to localize the variables in your inner functions using var.  In rotateCharsTimer, the substring operation could be simplified.  For readability, I prefer to write the newsTicker(), rotateChars(), and loopLs() functions normally rather than as anonymous functions assigned to a variable.  Also for readability, I suggest passing parameters to the helper functions explicitly.function newsTicker($ele) {  var $eles = $ele.find('ul > li'),      $current = $eles.hide().first(),      rotateCharsTimer;  function rotateChars($ele) {    var indexCut = 0;    var title = $ele.data('title');    rotateCharsTimer = setInterval(function () {      if ($ele.text().length >= title.length) {        clearInterval(rotateCharsTimer);      } else {        $ele.text(title.substr(0, indexCut++));      }    }, 90);  }  function loopLs($eles) {    if (typeof rotateCharsTimer != 'undefined'){      clearInterval(rotateCharsTimer);    }    $current.find('a').fadeOut('slow', function() {      $eles.hide();        $current = $current.next().length ? $current.next()                                        : $eles.first();      rotateChars($current.show()                          .find('a')                          .text('')                          .fadeIn());    });  }  // Transfer the text into a data-title attribute  $eles.find('a').each(function() {    $(this).data('title', $(this).text());  });  loopLs($eles);  setInterval(function(){loopLs($eles);}, 9400);}$ = jQuery;newsTicker($('#news-ticker'));jsFiddle with the recommendations