jQuery Effects - Sliding
The slide methods in jQuery allow you to move any HTML items up and down..
jQuery Sliding Methods
You may use jQuery to generate an element sliding effect.
Slide methods in jQuery are as follows :
slideDown()
slideUp()
slideToggle()
Related Links
jQuery slideDown() and slideUp() Methods
The slideDown
function is used slide an element down (making visible from invisible) from top to bottom.
The slideUp
function is used slide an element up (making invisible from visible) from bottom to top.
Syntax :-
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
The speed
and callback
parameters are optional.
The optional speed
parameter, which can take the values "slow," "rapid," or milliseconds, determines how quickly the hiding/showing happens.
The optional callback
parameter is a function to perform after completing the
slideDown()
or slideUp()
operation.
Example :-
Output :-
Related Links
jQuery slideToggle() Method
The slideToggle()
function in jQuery allows you to toggles between the slideDown()
and slideUp()
methods.
If the elements have been dragged down, they are dropped by slideToggle()
.
If the items have been dragged up, slideToggle()
will return them to their original position.
$(selector).slideToggle(speed,callback);
Example :-
Line 1
Line 2
Line 3
Line 4
Line 5
Line 2
Line 3
Line 4
Line 5