Advanced Search

jQuery - Stopping and Resetting Animations

/ Published in: jQuery
Save to your folder(s)
For those multiple rollovers - and their multiple flashes! The solution is to stop(!) them.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script type="text/javascript" src="../assets/js/jquery.js"></script>
  6.  
  7. <script type="text/javascript">
  8.  
  9. $(function () {
  10.  
  11. 	$('#animate').hover(function () {
  12. 		$('.box').stop().fadeTo(200, 1);
  13. 	}, function () {
  14. 		$('.box').stop().fadeTo(200, 0);
  15. 	});
  16.  
  17. })
  18. </script>
  19. </head>
  20. <body>
  21. <style type="text/css">
  22. 	.box {width:50px;height:50px;display:block;background:red;margin:20px;border:1px solid #ccc;}
  23. </style>
  24. 	<a href="#" id="animate">Animate</a>
  25. 	<div class="box"></div>
  26. 	<div class="box"></div>
  27. </body>
  28. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.