jQuery Sliding Methods
jQuery provides methods to create sliding effects for showing or hiding
elements:
- slideDown() – Slides an element down into view
- slideUp() – Slides an element up to hide it
- slideToggle() – Toggles between sliding down and up
jQuery slideDown() Method
The slideDown() method is used to display a hidden element by sliding it
down smoothly.
Syntax:
$(selector).slideDown(speed, callback);
- speed (optional): Determines how fast the slide occurs. Can be "slow", "fast", or a time in milliseconds (e.g., 1000).
- callback (optional): A function that runs after the sliding effect completes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery slideDown Example</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#panel").slideDown(); // slide down with default speed
});
});
</script>
<style>
#panel {
width: 300px;
height: 150px;
display: none; /* hidden initially */
background-color: lightblue;
border: 2px solid blue;
text-align: center;
line-height: 150px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>jQuery slideDown() Example</h2>
<button>Click to Slide Down Panel</button>
<div id="panel">Hello! I slid down 😃</div>
</body>
</html>
This example slides down an element with ID #panel when the button is
clicked.
jQuery slideUp() Method
The slideUp() method in jQuery is used to hide an element by sliding it
upward.
Syntax:
$(selector).slideUp(speed, callback);
- speed (optional): Sets the speed of the sliding effect. You can use "slow", "fast", or a specific time in milliseconds (e.g., 800).
- callback (optional): A function that runs after the slide-up completes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery slideUp Example</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp(); // Slide up panel
});
});
</script>
<style>
#panel {
width: 300px;
height: 150px;
background-color: lightgreen;
border: 2px solid green;
text-align: center;
line-height: 150px;
font-weight: bold;
}
#flip {
margin-bottom: 10px;
cursor: pointer;
background: darkgreen;
color: white;
padding: 8px;
width: 150px;
text-align: center;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>jQuery slideUp() Example</h2>
<div id="flip">Click to Slide Up</div>
<div id="panel">This panel will slide up!</div>
</body>
</html>
This example hides the element with ID #panel by sliding it up when the
#flip element is clicked.
jQuery slideToggle() Method
The slideToggle() method in jQuery is used to toggle between slideDown()
and slideUp().
- If the element is hidden, it slides down.
- If the element is visible, it slides up.
Syntax:
$(selector).slideToggle(speed, callback);
- speed (optional): Controls how fast the toggle happens. Accepts "slow", "fast", or a time in milliseconds (e.g., 1000).
- callback (optional): A function to run after the toggle effect completes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery slideToggle Example</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle(); // Toggle slide
});
});
</script>
<style>
#panel {
width: 300px;
height: 150px;
background-color: lightcoral;
border: 2px solid red;
text-align: center;
line-height: 150px;
font-weight: bold;
display: none; /* hidden initially */
}
#flip {
margin-bottom: 10px;
cursor: pointer;
background: darkred;
color: white;
padding: 8px;
width: 160px;
text-align: center;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>jQuery slideToggle() Example</h2>
<div id="flip">Click to Slide Toggle</div>
<div id="panel">Hello! I slide up and down 😃</div>
</body>
</html>
This code toggles the visibility of the element with ID #panel when the
#flip element is clicked, using a sliding animation.
More topic in jQuery
