Response title
This is preview!
Need help with Scrolling text with Pause on MouseEnter and Resume on MouseLeave
in Using jQuery Plugins
•
5 years ago
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:
- <!doctype html>
- <head>
- <meta charset="UTF-8">
- <title>Untitled Document</title>
- <link rel="stylesheet" type="text/css" href="css/style.css">
- <script type="text/javascript" src="scripts/jquery-3.1.1.js"></script>
- <script type="text/javascript" src="https://raw.github.com/tobia/Pause/master/jquery.pause.min.js"></script>
- </head>
- <body>
- <div class="outer">
- <div class="inner">
- <h3>Scrolling down... line 3</h3>
- <h3>Scrolling down... line 2</h3>
- <h3>Scrolling down... line 1</h3>
- </div>
- </div>
- <script type="text/javascript">
- function run(){
- var top = parseInt($(".inner").css("top").replace("px",""));
- var height = $(".outer").outerHeight();
- if(top < height)
- {
- $(".inner").animate({"top":height},5000,run)
- }
- else
- {
- $(".inner").css({"top":-height});
- run();
- }
- }
- run();
- </script>
- <script type="text/javascript">
- $(document).ready(function() {
- $(".inner").on("mouseenter",function(){
- $(this).pause();
- });
- $(".inner").on("mouseleave",function(){
- $(this).resume();
- });
- })
- </script>
- </body>
- </html>
1