30
Jun
2012

Expand and Contract using jQuery

Posted in: jQuery , No Comments

jquery_logo
We have already learned how to expand a region using jQuery in this post – Animate and Expand using jQuery.

But there, the region didn’t come back to initial state after removing mouse. In this jQuery tutorial I will show you how to apply expand and contract with animation.

In this tutorial:
I will first create a square region of 200 X 200 px and then expand its height 300px on hover, and when you remove the mouse it will contact back to height 200px

Step 1:
Define a ID box of width: 200px and height: 200px

#box {
width: 200px;
height: 200px;
background: red;
}

Step 2:
Display this box region.

<div id="box"></div>

Step 3:
Call the jQuery Library.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 4:
Now we will add jQuery code in head section and tell it to find ID box and expand it to new height 300px on mouse hover and contract it back to 200px on removing mouse.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).animate({'height' : '300px'});
	},
	function(){
	$(this).animate({'height' : '200px'});
	}
	);
});
</script>

Done!!!
Check below link for live demo.

Everything is fine in above code, but if you mouse on off many times and quickly, it will continue animating till it completes all cycles. This is little irritating and we don’t want. So, we will tell jQuery to first stop previous command and than execute the new command. This is done using stop() command.
So, our new modified jQuery code is:

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).stop().animate({'height' : '300px'});
	},
	function(){
	$(this).stop().animate({'height' : '200px'});
	}
	);
});
</script>

Done!!!
Check below link for live demo.

Animate with slow speed

You can set the animation speed to slow. Use below code for slow animation effect.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).stop().animate({'height' : '300px'},'slow');
	},
	function(){
	$(this).stop().animate({'height' : '200px'},'slow');
	}
	);
});
</script>

Animate with fast speed

You can set the animation speed to fast. Use below code for fast animation effect.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).stop().animate({'height' : '300px'},'fast');
	},
	function(){
	$(this).stop().animate({'height' : '200px'},'fast');
	}
	);
});
</script>

Animate with controlled speed

You can set the fade speed to a certain value. Use below code to expand in 1 second and contract in 2 seconds.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).stop().animate({'height' : '300px'},1000);
	},
	function(){
	$(this).stop().animate({'height' : '200px'},2000);
	}
	);
});
</script>

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply