Select Chapter ❯

jQuery Tutorial

jQuery Effects

With jQuery Slide effect you can slideup or slidedown an element with the help of slideUp() and slideDown() functions.

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.

$("#para1").click(function(){
  $("#div1").slideUp();
});

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.

$("#para1").click(function(){
  $("#div1").slideDown();
});

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.

$("#para1").click(function(){
  $("#div1").slideToggle();
});