Create news ticker animation 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 &lt; title.length) {
                    text = dataEle.text().concat(title.substr(indexCut, 1));
                    dataEle.text(text);
                };
                if (title.length - 1 &gt; 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 &gt; indexEle) indexEle++;
            else indexEle = 0;
        }
    loopLs();
    setInterval(function (){loopLs()},9400);
}


HTML:

&lt;div id="news-ticker"&gt;
    &lt;div class="ticker-title"&gt;Breaking News:&lt;/div&gt;
    &lt;ul&gt;
        &lt;li data-href="#1" data-title="No 10 armed police arrested over hardcore pornography"&gt;&lt;/li&gt;
        &lt;li data-href="#2" data-title="EDF extends life of UK nuclear plants"&gt;&lt;/li&gt;
        &lt;li data-href="#3" data-title="Superwoman Stephanie Flanders on how to do it all"&gt;&lt;/li&gt;
        &lt;li data-href="#4" data-title="Will Liverpool deliver for Suárez? Can Arsenal last?"&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;a class="ticker-post"&gt;&lt;/a&gt;
&lt;/div&gt;


Is this the best way to do this?
Your jQuery function was okay, but it's common practice now to put your animations into CSS wherever possible. 

I've rewritten your code, moving as much as possible into CSS. I'll explain how and why below, or you can skip to the final solution here.

Semantically your links shouldn't be data-attributes as they control page navigation and need to be visible and identifiable as such.

&lt;div id="news-ticker"&gt;
    &lt;div class="ticker-title"&gt;Breaking News: &lt;/div&gt;
    &lt;ul&gt;
        &lt;li&gt;
            &lt;a href="http://www.thetimes.co.uk/tto/news/uk/crime/article3999682.ece"&gt;No 10 armed police arrested over hardcore pornography&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a href="http://www.thetimes.co.uk/tto/environment/article3999530.ece"&gt;EDF extends life of UK nuclear plants&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;


You shouldn't use float: left for this, these components are inline, not floating.

#news-ticker .ticker-title {
    display: inline-block;
    margin-right: 12px;
}

#news-ticker ul { 
    display: inline-block;
    position: relative;
}


Next we want to make each news item invisible when not active, and we want them to all appear in the same place. A simple way to do this is to make their position absolute.

#news-ticker li {
    position: absolute;
    left: 0;
    width: 0;
    overflow: hidden;
    height: 1em;
    word-wrap: break-word;  
    opacity: 0
}


There are a few more things I've added here as well...


width: 0: By making the width of the elements 0 they are invisible, and we can extend the width to show them a letter at a time.
word-wrap: break-word: This helps us get the tick each letter at a time effect.
overflow: hidden: stops us from seeing the rest of the sentence when the container isn't wide enough.


Next we make the animation. There's a good guide here about how they work.

#news-ticker li.tick {
    -webkit-animation: tick 5s linear;

}

@-webkit-keyframes tick {
  0% {
    width: 0;
  }
  5% {
      opacity: 1;
  } 
  90% {
    width: 550px;
    opacity: 1;
  }
  100% {
     opacity: 0
  }
}


This means that when we add the class .tick to one of our list elements it will animate from 0 width to 550px.

Now for our small amount of JavaScript to switch the classes and make the wrap work on letters instead of words.

$(function () {
   var $ticker = $('#news-ticker'),
   $first = $('li:first-child', $ticker);


Unfortunately there's no letter-wrap CSS attribute, so we have to cheat a little. Here I insert a blank space inbetween each letter, essentially making it a word.

   $('a', $ticker).each(function () {
       var $this = $(this),
         text = $this.text();
       $this.html(text.split('').join('&amp;#8203;'));
   });


And then start the ticker. Every time an animation ends, it grabs the next (or first) element and continues:

   function tick($el) {
     $el.addClass('tick')
       .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function () {

         $el.removeClass('tick');
           var $next = $el.next('li');
           $next = $next.length &gt; 0 ? $next : $first;
         tick($next);
     });
   }

   tick($first);

});