05
Jul
2012

jQuery SlideDown

Posted in: jQuery , No Comments

jquery_logo
jQuery SlideDown() method is used to display the matched elements with slide down effect. Thus you can show a hide element with an animated slide effect.

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 hide ID box when a link of class slideup is clicked.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hide(); // this will hide #box
	$(".slidedown").click(function() {
	$("#box").slideDown(); 
	});
});
</script>

Done!!!
Check below link for live demo.

slideDown with slow speed

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

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hide();
	$(".slidedown").click(function() {
	$("#box").slideDown('slow');
	});
});
</script>

slideDown with fast speed

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

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hide();
	$(".slidedown").click(function() {
	$("#box").slideDown('fast');
	});
});
</script>

FadeIn with controlled speed

You can set the SlideUp speed to a certain value. Use below code to SlideUp in 2 seconds.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hide();
	$(".slidedown").click(function() {
	$("#box").slideDown(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