title: Pause recursive jquery scrolling text animation
body: <p>I have written a jQuery animation that slides text upwards to create a vertical scrolling effect, then scrolls back to the original position and starts over.<br>
  The scrolling animation is working fine but I can't figure out how to get the animation to pause on hover, and resume on mouseout.
  I'm trying to create a fallback for a CSS3 animation.</p>
  
  <p>Here's a jsfiddle for what I have so far: <a href="http://jsfiddle.net/stlouisweb/5X3gZ/" rel="nofollow">http://jsfiddle.net/stlouisweb/5X3gZ/</a></p>
  
  <pre><code>$(document).ready(function(){  
      function scroll(){
          var x = 0;
          var scrollInterval = setInterval(function() {
          $("#scrollBox").delay(2000).animate({top:"-=30"}, 1000);
              if (++x === 2) {
                  window.clearInterval(scrollInterval);
                  $("#scrollBox").delay(2000).animate({top:"0px"}, 1000);
                  scroll();
              }
          });
      };
      scroll();
  });
  </code></pre>
  
  <p>Here is an updated fiddle showing how I thought this might work:
  <a href="http://jsfiddle.net/stlouisweb/KD75a/1/" rel="nofollow">http://jsfiddle.net/stlouisweb/KD75a/1/</a></p>
  
  <p>updated code: </p>
  
  <pre><code>$(document).ready(function(){  
      function scroll(){
         $("#scrollBox").hover(function(){
            $("#scrollBox").stop();
            window.clearInterval(scrollInterval);
         });
          var x = 0;
          var scrollInterval = setInterval(function() {
          $("#scrollBox").delay(2000).animate({top:"-=30"}, 1000);
              if (++x === 2) {
                  window.clearInterval(scrollInterval);
                  $("#scrollBox").delay(2000).animate({top:"0px"}, 1000);
                  scroll();
              }
          }, 500);
      };
      scroll();
  });
  </code></pre>