28
Jun
2012

Animate and Expand using jQuery

Posted in: jQuery , No Comments

jquery_logo
In this jQuery tutorial I will show you how to expand or contract a region with animation using jQuery.

I will first create a square region of 200 X 200 px and then expand it to 200 X 300 px
In simple words, we will increase its height to 300 px

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 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.

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

Done!!!
Check below 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).animate({'height' : '300px'}, '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).animate({'height' : '300px'}, 'fast');
	});
});
</script>

Animated with a pre-defined speed

You can set the animation speed. Use below code to animated in 4 seconds.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).animate({'height' : '300px'}, 4000);
	});
});
</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