events added to pause or resume the animation

README.md

@@ -25,6 +25,8 @@ Events:
 ------
  - **beforeStarting:** Event will be fired on the element before animation starts.
  - **finished:** Event will be fired on the element after the animation finishes.
+ - **pause:** Fire this event on the element when you want to pause the animation, for example when you click/hover a link.
+ - **resume:** Fire this event on the element when you want to resume, the paused animation.
 
 Demo & blog post:
 -----

index.html

@@ -8,6 +8,7 @@
 		<script src="jquery.marquee.js"></script>
 		<script>
 			$(function(){
+				var $mwo = $('.marquee-with-options');
 				$('.marquee').marquee();
 				$('.marquee-with-options').marquee({
 					//speed in milliseconds of the marquee
@@ -23,6 +24,22 @@
 					//on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
 					pauseOnHover: true
 				});
+
+				//pause and resume links
+				$('.pause').click(function(e){
+					e.preventDefault();
+					$mwo.trigger('pause');
+				});
+				$('.resume').click(function(e){
+					e.preventDefault();
+					$mwo.trigger('resume');
+				});
+				//toggle
+				$('.toggle').hover(function(){
+					$mwo.trigger('pause');
+				},function(){
+					$mwo.trigger('resume');
+				});
 			});
 		</script>
 		<style type="text/css">
@@ -62,6 +79,8 @@ <h2>Events</h2>
 		<ul>
 			<li><b>beforeStarting:</b> Event will be fired on the element before animation starts.</li>
 			<li><b>finished:</b> Event will be fired on the element after the animation finishes.</li>
+			<li><b>pause:</b> Fire this event on the element when you want to pause the animation, for example when you click/hover a link.</li>
+			<li><b>resume:</b> Fire this event on the element when you want to resume, the paused animation.</li>
 		</ul>
 
 		<h2>Options</h2>
@@ -96,5 +115,8 @@ <h3>Overwrite the default options with following.</h3>
 });
 </pre>
 		<div class='marquee-with-options'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
+
+		<a class='pause' href='#'>Pause the above animation</a> | <a class='resume' href='#'>Resume the paused animation</a> | <a class='toggle' href='#'>Pause on hover this link</a>
+		<br/><br/>
 	</body>
 </html>

jquery.marquee.js

@@ -76,6 +76,10 @@
 				});
 			};
 
+			//bind pause and resume events
+			$this.on('pause', function(){ $marqueeWrapper.pause(); });
+			$this.on('resume', function(){ $marqueeWrapper.resume(); });
+
 			if(o.pauseOnHover) {
 				$this.hover(
 					function() {