title: Pause animation on mouseover/hover
body: <p>I've made a jQuery script that will scroll through a UL list, the problem is that I would like it to pause the animation if the current item in the list is hovered.</p>
  
  <p>I have a timer that calls my ticker function every second, and an update function that updates the list with new items, I havn't included that one as it doesn't have anything to do with the animation.</p>
  
  <pre><code>// Initiate a call to ticker every 1second
      var tickerUpdateTimer = setInterval('ticker()', 1000);
  </code></pre>
  
  <p>The ticker functions use the jQuery UI slide function</p>
  
  <pre><code>function ticker() {
      if ($('ul#ticker li:first').length == 0)
          tickerUpdate();
  
          $.when(tickerSlideIn()).then(tickerSlideOut());
  }
  
  function tickerSlideIn() {
      $('ul#ticker li:first').show("slide", { direction: "down" }, tickerSpeed).delay(tickerPause);
  }
  
  function tickerSlideOut() {
      $('ul#ticker li:first').hide("slide", { direction: "up" }, tickerSpeed, function() {$(this).remove();});
  }
  </code></pre>
  
  <p>I hope that someone can help me rewrite my functions to pause on hover/mouseover, thanks.</p>