Select Chapter ❯
jQuery Tutorial
- jQuery Introduction
- jQuery Selector
- jQuery Traversing
- jQuery Events
- jQuery Get/Set
- jQuery Add/Remove
- jQuery CSS
jQuery Effects
jQuery Ajax
jQuery Slide
With jQuery Slide effect you can slideup or slidedown an element with the help of slideUp() and slideDown() functions.
jQuery slideUp()
It is used to slide up the element.
Syntax
$(selector).slideUp(speed,callback);
Code Explanation
- It takes speed parameter to define what speed the hide and show effect takes place it takes value in milliseconds.
- It takes callback as an optional parameter you can give function that is executed after the completion of effect.
Example of slideUp()
$("#para1").click(function(){ $("#div1").slideUp(); });
jQuery slideDown()
It is used to slide down the element.
Syntax
$(selector).slideDown(speed,callback);
Code Explanation
- It takes speed parameter to define what speed the hide and show effect takes place it takes value in milliseconds.
- It takes callback as an optional parameter you can give function that is executed after the completion of effect.
Example of slideDown()
$("#para1").click(function(){ $("#div1").slideDown(); });
jQuery slideToggle()
jQuery slideToggle() effect is used to toggle between slideUp() and slideDown() automatically
Syntax
$(selector).slideToggle(speed,callback);
Code Explanation
- It takes speed parameter to define what speed the hide and show effect takes place it takes value in milliseconds.
- It takes callback as an optional parameter you can give function that is executed after the completion of effect.
Example of slideToggle()
$("#para1").click(function(){ $("#div1").slideToggle(); });