< Jquery Tutorial

Jquery Sliding

← Previous Next →


slideDown()

jQuery slideDown() method is used to slide down an element.

Syntax:

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

speed: It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after completion of slideDown() effect.

Let's take an example to demonstrate jQuery slideDown() effect.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); </script>
<style>
#panel, #flip { padding: 5px; text-align: center; background-color: #00FFFF; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello javatpoint.com! It is the best tutorial website to learn jQuery and other languages.</div> </body>
</html>

jQuery slideUp()

jQuery slideDown() method is used to slide up an element.

Syntax:

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

speed: It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after completion of slideUp() effect.

 

← Previous Next →