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