Text rotator (window.setInterval)

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/ui-lightness/jquery-ui.css">
<div class="container">
    <div class="rotator">
      <span>First text</span>
      <span>Second messaget</span>
      <span>x... messaget</span>
    </div>
</div>

CSS

.container {

 font-family: sans-serif;
 font-size: 14px;

}

JavaScript

$(function() {
  var terms= [];
$( ".rotator" ).find('span').each(function( index ) {
 	terms.push($( this ).text());
});

  
  $('.rotator')
    .data('intervalLink', window.setInterval(function() {
      var i = arguments.callee.i ? arguments.callee.i : 0,
        message = terms[i];
      $('.rotator').animate({
        opacity: 0
      }, 500, function() {
        $(this).html(message);
      }).animate({
        opacity: 1
      }, 500);
      arguments.callee.i = (i++ == (arr.length - 1)) ? 0 : i++;
    }, 1000));
});