05
Jul
2012

jQuery slideUp

Posted in: jQuery , No Comments

jquery_logo
jQuery SlideUp() method is used to hide the matched element with sliding up effect. Thus you can hide an 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() {
	$(".slideup").click(function() {
	$("#box").slideUp();
	});
});
</script>

Done!!!
Check below link for live demo.

SlideUp with slow speed

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

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

SlideUp with fast speed

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

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

SlideUp 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() {
	$(".slideup").click(function() {
	$("#box").slideUp(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