News Ticker - Досрочный перезапуск

Question

Я пытаюсь заставить этот тикер новостей работать. По какой-то причине он перезапустится после второго элемента списка, чего я не хочу - я хочу, чтобы он вращался по элементам списка до самого конца. Что случилось с этим скриптом?

Вот JSFiddle

HTML

<h1>This runs differently than the ticker for some reason. It's highly annoying in my personal opinion.</h1> 
<div id="ticker">  
    <div class="event">test1</div> 
    <div class="event">test2</div> 
    <div class="event">test3</div> 
    <div class="event">test4</div> 
</div>​ 

CSS

.event{float: left; width: 100px;}​ 

Javascript/Jquery

(function($) { 
     $.fn.textWidth = function(){ 
      var calc = '<span style="display:none">' + $(this).text() + '</span>'; 
      $('body').append(calc); 
      var width = $('body').find('span:last').width(); 
      $('body').find('span:last').remove(); 
      return width; 
     }; 

     $.fn.marquee = function(args) { 
      var that = $(this); 
      var textWidth = that.textWidth(), 
       offset = that.width(), 
       width = offset, 
       css = { 
        'text-indent' : that.css('text-indent'), 
        'overflow' : that.css('overflow'), 
        'white-space' : that.css('white-space') 
       }, 
       marqueeCss = { 
        'text-indent' : width, 
        'overflow' : 'hidden', 
        'white-space' : 'nowrap' 
       }, 
       args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args), 
       i = 0, 
       stop = textWidth*-1, 
       dfd = $.Deferred(); 

      function go() { 
       if (that.data('isStopped') != 1) 
       { 
       if(!that.length) return dfd.reject(); 
       if(width == stop) { 
        i++; 
        if(i == args.count) { 
         that.css(css); 
         return dfd.resolve(); 
        } 
        if(args.leftToRight) { 
         width = textWidth*-1; 
        } else { 
         width = offset; 
        } 
       } 
       that.css('text-indent', width + 'px'); 
       if(args.leftToRight) { 
        width++; 
       } else { 
        width--; 
       } 
      } 

       setTimeout(go, 10); 
      }; 
      if(args.leftToRight) { 
       width = textWidth*-1; 
       width++; 
       stop = offset; 
      } else { 
       width--;    
      } 
      that.css(marqueeCss); 
      that.data('isStopped', 0); 
      that.bind('mouseover', function() { $(this).data('isStopped', 1); }).bind('mouseout', function() { $(this).data('isStopped', 0); }); 
      go(); 
      return dfd.promise(); 
     };   
    })(jQuery); 
     $('h1').marquee(); 
     $('#ticker').marquee();​ 

Answer 1

Просто поместите его в контейнер DIV

<div id="ticker-container"> 
<h1>This runs differently than the ticker for some reason. It's highly annoying in my personal opinion.</h1> <div id="ticker">  
    <div class="event">test1</div> 
    <div class="event">test2</div> 
    <div class="event">test3</div> 
    <div class="event">test4</div> 
</div> 
</div> 

$('#ticker-container').marquee();