jQuery Sliding Effects: slideUp, slideDown, slideToggle Methods
jQuery slideDown() Method
The slideDown()
method displays the selected pieces by sliding them down (showing them).
Note that slideDown()
effect in jQuery works on components that have been hidden using jQuery techniques and CSS display: none (but not visibility: hidden).
Tip: Look at the slideUp() method to slide up (hide) components.
Syntax for slideDown method in jQuery
$(selector).slideDown(speed,easing,callback)
Example of jQuery slideDown effect in jQuery
Slide all hidden
elements down (show):
$("button").click(function(){
$("p").slideDown();
});
jQuery slideUp() Method
The slideUp()
effect in jQuery moves the selected components up (hidden them).
Tip: Look at the slideDown()
method to slide down (display) components.
Syntax for slideUp method in jQuery
$(selector).slideUp(speed,easing,callback)
Example of jQuery slideUp effect
All
elements should be slid up (hidden):
$("button").click(function(){
$("p").slideUp();
});
jQuery slideToggle() Method
For the selected items, the slideToggle()
method toggles between slideUp()
and slideDown()
.
This method verifies the visibility of the specified components. If an element is hidden, slideDown()
is called. If an element is visible, slideUp()
is called, which generates a toggle effect.
Syntax for slideToggle method in jQuery
$(selector).slideToggle(speed,easing,callback)
Example of jQuery slideToggle effect
For all
elements, toggle between slideUp()
and slideDown()
:
$("button").click(function(){
$("p").slideToggle();
});