title: Pause Jquery script on mouseover
body: <p>I use this little code snippet for a jquery news ticker:</p>
  
  <pre><code>var speed = 5;
  var items, scroller = $('#scroller');
  var width = 0;
  
  scroller.children().each(function(){
      width += $(this).outerWidth(true);
  });
  
  scroller.css('width', width);
  
  scroll();
  
  function scroll(){
      items = scroller.children();
      var scrollWidth = items.eq(0).outerWidth();
      scroller.animate({'left' : 0 - scrollWidth}, scrollWidth * 100 / speed, 'linear', changeFirst);
  }
  
  function changeFirst(){
      scroller.append(items.eq(0).remove()).css('left', 0);
      scroll();
  }
  </code></pre>
  
  <p>I try to pause the script when mouseover.</p>
  
  <p>Using stop() function, it works but it loses speed every time I pass my mouse over.</p>
  
  <p>I know their is something to do with width / distance / speed but I'm unable to correct it.</p>
  
  <p>Here is the full script: <a href="http://codepen.io/anon/pen/wBayyz" rel="nofollow">http://codepen.io/anon/pen/wBayyz</a></p>
  
  <p>Thank You.</p>