Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

jQuery Slide

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();
});
PreviousNext

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH

Check Out SEMRUSH