jQuery Effects – Sliding Elements into/out of View

In addition to hiding and reveling HTML elements, jQuery allows you to move elements around on the screen, over a given duration.

Vertically Appearing / Disappearing Movements

jQuery provides two commonly used methods to vertically add/remove an HTML element. .slideUp() and .slideDown().

.slideUp() will cause an element to remove itself from view, but sliding up into where it cannot be seen. This effects pulls the element up, keeping the top, but making it look like it is being removed.

.slideDown() will make the element appear to be lowering itself, as it is revealed.

Neither of these two fade the element in by default. They only make elements appear/disappear.

As with the fading methods that jQuery gives us, we get two optional parameters. The first defines a duration for the effect. The second lets us execute an event when the animation is completed.

Toggling the Sliding Effect

Just like with the show/hide and fadeIn/fadeOut methods, the slide effect also has a toggle that will allow the element to be toggled into or out of view. jQuery will determine if the element is visible or not, and perform the appropriate sliding action for us.

Examples of sliding are shown below:

// slide up to hide the target element
$('#btnSlideUp').click(function() {
  $('#target').slideUp();
});

// slide down to reveal the target element
$('#btnSlideDwn').click(function() {
  $('#target').slideDown();
});

// toggle the target element by sliding appropriately
$('#btnSlideToggle').click(function() {
  $('#target').slideToggle();
});

jQuery Effects – Sliding Elements into/out of View was originally found on Access 2 Learn