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:
$("button").click(function(){
$("#panel").slideDown(); // Slide down with default speed
});
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:
$("#flip").click(function(){
$("#panel").slideUp(); // Slide up the panel when #flip is clicked
});
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:
$("#flip").click(function(){
$("#panel").slideToggle(); // Toggle sliding of #panel on click
});
This code toggles the visibility of the element with ID #panel when the #flip element is clicked, using a sliding animation.
