♦ jQuery Slide
♣ About jQuery Slide
Sliding of HTML element can be performed in jQuery.Two kinds of sliding exist, sliding UP and sliding DOWN.
♣ Example1: jQuery slideDown()
slideDown() method is used to slide Down the HTML element,i.e, the element is displayed from hidden.Below is the representation of slideDown() Syntax.
Basic Syntax
$(selector).slideDown(speed,callback);
selector: the element selector
speed: speed of slide Down, can be slow,fast or milliseconds
callback: function call after slide Down
In this example, slideDown() method is illustrated.speed: speed of slide Down, can be slow,fast or milliseconds
callback: function call after slide Down
Example
Input:
Output:
♣ Example2: jQuery slideUp()
slideUp() method is used to slide Up the HTML element,i.e, the element is hided from displaying.Below is the representation of slideUp() Syntax.
Basic Syntax
$(selector).slideDown(speed,callback);
selector: the element selector
speed: speed of slide Up, can be slow,fast or milliseconds
callback: function call after slide Up
In this example, slideUp() method is illustrated.speed: speed of slide Up, can be slow,fast or milliseconds
callback: function call after slide Up
Example
Input:
Output:
♣ Example3: jQuery slideToggle()
slideToggle() method is used to slide Up or slide Down the HTML element interchangeably depending upon the current state of displaying.Below is the representation of slideToggle() Syntax.
Basic Syntax
$(selector).slideDown(speed,callback);
selector: the element selector
speed: speed of slide Toggling, can be slow,fast or milliseconds
callback: function call after slide Toggling
In this example, slideToggle() method is illustrated.speed: speed of slide Toggling, can be slow,fast or milliseconds
callback: function call after slide Toggling
Example
Input:
Output: