jQuery Effects Showing & Hiding Elements

jQuery allows you to perform several visual effects on one or more elements. Effects can be to show or hide and element, as well as moving an element from one area of a page to another.

Showing and Hiding Elements

jQuery offers you several ways to show/hide an element based upon what you want to do.

.show() / .hide()

.show() works to display a hidden HTML element. The element will immediately appear without delay or effect normally. If the element is already visible, there will be no change. If the element is in the flow of other elements, their positions may adjust.

Conversely, .hide() will hide a visible element. The element will immediately disappear without delay or effect normally. If the element is already hidden no change will occur. If the element is in the flow of other elements, their positions may adjust.

// show the element on the screen
$('#btnShow').click(function() {
  $('#target').show()'
});

// show the element on the screen
$('#btnHide').click(function() {
  $('#target').hide()'
});

Can’t see it here – watch on YouTube

.toggle()

.toggle() is a nice effect that is also built into jQuery. This will alternately show or hide, an element based upon its current status. So if the target element is hidden, it will appear, likewise, if the element is visible, it will be hidden.

// toggle the visability of the target element
$('#btnToggle').click(function() {
  $('#target').toggle();
});

 

Fade Effects

Likewise, you can fade your target element into, or out of the web page. This is similar to the show() and hide(), except instead of happening automatically, it takes some time to occur.

The two most likely to be seen are fadeIn() and fadeOut().

The general form will look something like:

$('#item').fadeIn(duration, completed);

Duration is how long the effect will take to complete. Completed would be a function to run once the animation is done. Both of these parameters are optional.

Duration

There are several ways to figure duration of an effect.

First is the default value. A medium speed, of just under 1/2 a second. In jQuery, this is measured in milliseconds, so 400 milliseconds. This is used, if you don’t specify a value for the duration.

In addition to the reset medium duration, there is also fast and slow durations that are preset for everyone. Additionally, you can pass in a numeric value to the animation.

// fade in "fast"
$('#target').fadeIn('fast');
// this is the same
$('#target').fadeIn(200);

 

Additional Fading Methods

Additionally, jQuery has several other fading methods, although they are not as common. This includes fadeToggle(), and fadeTo().

fadeToggle() is similar to the toggle() method. However, it uses a fade instead of snapping in / out.

fadeTo() allows you to fade to a certain opacity setting from your current setting. So you may want to make an element partially transparent, but not completely remove. This is when you would use this function. fadeTo() requires that you pass it both the duration, and a opacity. Opacity must be a number between 0 (transparent) and 1 (opaque).

// make %50 transparent/opaque.
// take approx a third of a second to do it
$('#target').fadeTo(300, .5);

Can’t see it Here. Watch on YouTube

jQuery Effects Showing & Hiding Elements was originally found on Access 2 Learn