advanced code snippet search

Posted By

Meander365 on 09/29/10


Tagged

jquery hover animation multiple


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

bobbym245
johnw
jaypplr


Jquery Avoiding Multiple Hover Animations

 / Published in: jQuery
 

Another handy one and one which I see quite often. You rollover an element and it animates. You then mouseover and mouseleave really quickly, multiple times and all the animations gets queued. This solves that problem. The delay(200) is like adding the old hoverIntent plugin; it waits before animating.

Expand | Embed | Plain Text 
  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. 	$('.box').hover(
  11. 		function(){
  12. 			$(this).stop(true).delay(200)
  13. 			.fadeTo( 1, 1000 )
  14. 			.animate( {height:500}, 1000 );
  15. 		},
  16. 		function(){
  17. 			$(this).stop(true)
  18. 			.fadeTo( 0.8, 1000 )
  19. 			.animate( {height:100}, 1000 );
  20. 		});
  21. });
  22. </script>
  23. </head>
  24. <body>
  25. <style type="text/css">
  26. 	.box {background:#efefef;border:1px solid #ccc;width:200px;float:left;margin-left:10px;text-align:center;height:100px;}
  27. </style>
  28. 	<p>In other news...</p>
  29. 	<div class="box"><p>Hey I'm a box.</p></div>
  30. 	<div class="box"><p>Hey I'm a box.</p></div>	
  31. 	<div class="box"><p>Hey I'm a box.</p></div>	
  32. </body>
  33. </html>

Report this snippet  

You need to login to post a comment.