Objectives and outcomes

In this tutorial we are going to learn about jquery slide effect. We can slide DOM elements using jquery slideUp() and slideDown() methods. Example for the same is shown below:



Syntax for method

$(selector).slideUp(speed,callback);
$(selector).slideDown(speed,callback);

You can learn about selector in our Jquery selector tutorial while the speed parameter defines the pace of the effect. It can have values like "slow", "fast" and milliseconds. callback parameter is a function which is executed after the slide method complete its execution.
Note: Both the parameters are optional.



Click the buttons to slide up/down


Learn Jquery, AngularJs and many more technologies with codeshot !!






HTML code:

<html>
<head>
<meta charset="utf-8">
<title>Jquery slide effect</title>
<script src="jquery/jquery.min.js"></script>
</head>
<body>
<div class="heading">Click the buttons to slide up/down</div><br/>
<div id="example">
<br/>
<p>Learn Jquery, AngularJs and many more technologies with codeshot !!</p></p><br/>
</div>
<br/>
<button id="butn1">SlideUp</button><br/>
<button id="butn2">SlideDown</button>
</body>
</html>


CSS stylesheet

<style>
#example
{
color:#000;
font-size:24px;
height:180px;
text-align:center;
}

.heading
{
height:25px; 
font-size:18px; 
background-color:#585858; 
color:#fff; 
text-align:center;
}
</style>


Javascript

<script>
$(document).ready(function()
{
$('#butn1').click(function()
{
$('#example').slideUp();
});
		
$('#butn2').click(function()
{
$('#example').slideDown();
});
});
</script>