Advanced Search

Return to Snippet

Revision: 32589
at September 29, 2010 18:05 by Meander365
Initial Code 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../assets/js/jquery.js"></script>

<script type="text/javascript">
	
$(function () {
	$('.box').hover(
		function(){
			$(this).stop(true).delay(200)
			.fadeTo( 1, 1000 )
			.animate( {height:500}, 1000 );
		},
		function(){
			$(this).stop(true)
			.fadeTo( 0.8, 1000 )
			.animate( {height:100}, 1000 );
		});
});
</script>
</head>
<body>
<style type="text/css">
	.box {background:#efefef;border:1px solid #ccc;width:200px;float:left;margin-left:10px;text-align:center;height:100px;}
</style>
	<p>In other news...</p>
	<div class="box"><p>Hey I'm a box.</p></div>
	<div class="box"><p>Hey I'm a box.</p></div>	
	<div class="box"><p>Hey I'm a box.</p></div>	
</body>
</html>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
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.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Jquery Avoiding Multiple Hover Animations

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
jquery, animation

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery