Need help with Scrolling text with Pause on MouseEnter and Resume on MouseLeave

Need help with Scrolling text with Pause on MouseEnter and Resume on MouseLeave

Im  very new to jquery and would like some assistance please.

I am trying to get scrolling text that pauses on mouse enter and resumes on mouse leave.

here is my current code:

  2. <!doctype html>

  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Untitled Document</title>
  7. <link rel="stylesheet" type="text/css" href="css/style.css">
  8. <script type="text/javascript" src="scripts/jquery-3.1.1.js"></script>
  9. <script type="text/javascript" src="https://raw.github.com/tobia/Pause/master/jquery.pause.min.js"></script>

  11. </head>

  13. <body>


  16. <div class="outer">
  17. <div class="inner">
  18.   <h3>Scrolling down... line 3</h3>
  19.   <h3>Scrolling down... line 2</h3> 
  20.   <h3>Scrolling down... line 1</h3> 
  21. </div>
  22. </div>




  27. <script type="text/javascript">
  28. function run(){
  29.     var top = parseInt($(".inner").css("top").replace("px",""));
  30.     var height = $(".outer").outerHeight();
  31.     if(top <  height)
  32.     {
  33.        $(".inner").animate({"top":height},5000,run)           
  34.     }
  35.     else
  36.     {
  37.         $(".inner").css({"top":-height});
  38.         run();
  39.     }
  40.     
  41. }
  42. run();
  43. </script>
  48. <script type="text/javascript">
  49. $(document).ready(function() {
  51.     $(".inner").on("mouseenter",function(){
  52.         $(this).pause();
  53.     });
  54.     
  55.     $(".inner").on("mouseleave",function(){
  56.         $(this).resume();
  57.     });
  59. })
  60. </script>


  63. </body>
  64. </html>