About Lesson
Sliding Effects in jQuery
In this lesson, you will learn how to create sliding transitions for elements using jQuery. The sliding methods allow you to smoothly hide, show, or toggle the visibility of elements.
1. .slideUp() Method
The .slideUp() method hides an element by sliding it upwards.
JavaScript
$("#slide-up").click(function () {
$("#content").slideUp();
});2. .slideDown() Method
The .slideDown() method shows a hidden element by sliding it downwards.
JavaScript
$("#slide-down").click(function () {
$("#content").slideDown();
});3. .slideToggle() Method
The .slideToggle() method toggles between sliding up and sliding down.
JavaScript
$("#slide-toggle").click(function () {
$("#content").slideToggle();
});Practical Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sliding Effects in jQuery</title>
<style>
#content {
width: 300px;
height: 150px;
background-color: lightgreen;
text-align: center;
line-height: 150px;
margin: 20px auto;
border: 2px solid darkgreen;
display: none; /* Initially hidden */
}
</style>
</head>
<body>
<button id="slide-up">Slide Up</button>
<button id="slide-down">Slide Down</button>
<button id="slide-toggle">Slide Toggle</button>
<div id="content">Sliding Content</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function () {
// Slide up
$("#slide-up").click(function () {
$("#content").slideUp();
});
// Slide down
$("#slide-down").click(function () {
$("#content").slideDown();
});
// Toggle slide effect
$("#slide-toggle").click(function () {
$("#content").slideToggle();
});
});
</script>
</body>
</html>
Summary
- .slideUp(): Slides an element out of view by sliding it upwards.
- .slideDown(): Slides an element into view by sliding it downwards.
- .slideToggle(): Toggles between sliding up and sliding down.