JQUERY slide

Click Here

For the slide effect there are 3 possibilities: slideDown, slideUp and slideToggle

slideDown

The effect slideDown() is used to slide down any HTML element that was previously hidden.

Example JQUERY slideDown()

Since the element with the id = "layer" hidden, we do visible by sliding down

$("#layer").slideDown();

You can have 2 optional parameters (speed and callback)

The parameter "speed" indicates the milliseconds that it should take effect.

The parameter "callback" indicates JQUERY function to be executed at the end of the effect.

Example JQUERY slideDown (speed, callback)

To display by sliding the element with id = "layer", with a duration of 2 seconds and display an alert indicating that the effect has ended.

$("#layer").slideDown( 2000, function(){ alert("The effect is complete");} );

slideUp

The effect slideUp() is used to hide by sliding up, any HTML element that is visible.

Example JQUERY slideUp()

Since the element with the id = "layer" visible, we do unseen by sliding up

$("#layer").slideUp();

You can have 2 optional parameters (speed and callback)

The parameter "speed" indicates the milliseconds that it should take effect.

The parameter "callback" indicates JQUERY function to be executed at the end of the effect.

Example JQUERY slideUp (speed, callback)

Eyepiece by sliding the element with id = "layer", with a duration of 2 seconds and display an alert indicating that the effect has ended

$("#layer").slideUp(
2000,
function(){ alert("The effect is complete");}
);

slideToggle

The effect slideToggle() is used to switch between sliding up and sliding down.

Example JQUERY slideToggle

If the element with id = "layer" is hidden then we make visible with sliding downwards.

If the element with id = "layer" that is visible then hide it by sliding up.

$("#layer").slideToggle();

You can have 2 optional parameters (speed and callback)

The parameter "speed" indicates the milliseconds that it should take effect.

The parameter "callback" indicates JQUERY function to be executed at the end of the effect.

Example JQUERY slideToggle (speed, callback)

To display by sliding the element with id = "layer", with a duration of 2 seconds and display an alert indicating that the effect has ended

$("#layer").slideToggle(
2000,
function(){ alert("The effect is complete");}
);

Click Here