📖 jQuery Effects and Animations

jQuery provides a variety of effects for user interactions including show and hide elements, fade elements in and out, sliders and animation of CSS properties. Effects are generally used in conjunction with an event. Elements that are hidden are removed from the flow of the page. An example of these effects can be found at https://2learnweb.brookhavencollege.edu/profherd/javascript/examples/jquery-animation-effects-example/. 

jQuery Effects
.hide()

Hides an element
.show()

Makes a hidden element visible
.toggle()

Switches the element's display value:

  • hides a visible element,
  • shows a hidden element
.fadeOut(speed, ease)

Causes an element to disappear over a period of time.

Speed can be a number in milliseconds or slow (600ms), normal (400ms) or fast (200ms)

  • If speed is not specified, default is normal

Ease is the rate of acceleration and can be linear (even speed for the entire duration) or swing (starts faster and ends slower)

  • If ease is not specified, the default is swing
.fadeIn(speed, ease)

Causes a hidden element to appear over a period of time. 

Speed and ease are the same as for fadeOut  
.fadeToggle(speed, ease)

Toggles between fadeIn() and fadeOut()

  • Fades in a hidden element,
  • Fades out a visible element.
.fadeTo(speed, opacity, ease)

Fades an image to a specific opacity 

Speed is the number of milliseconds or slow, normal, fast

Opacity is a number between 0 and 1 for opacity

  • i.e. .50 is 50% opacity,
  • 0 would be completely transparent
  • 1 would be fully opaque)
  • An element with 0 opacity would still occupy space on the page

Ease is the rate of acceleration (linear or swing)
.slideDown(speed, ease)

Slides element into view

Top appears first

Elements below are pushed down as the element appears

No effect if element is already visible
.slideUp(speed, ease)

Slides element out of view

Bottom disappears first

Elements below are moved up as the element disappears

No effect if element is already hidden
.slideToggle(speed, ease)

Applies slideDown() effect if element is hidden

Applies slideUp() effect if element is visible
.animate(objectLiteral, speed, ease)

Animates any CSS property that accepts numeric values

objectLiteral is an object literal with a list of CSS properties and values to be animated:

{
  font-size: '2em',
    opacity: .5,
    width: '50%'
}

May also set a property relative to its current value using += or -=:

{ left: '+=10px' }

Speed is the number of milliseconds or slow, normal, fast

Ease is the rate of acceleration
Example
$('selector').click(function() {
    $('selector').hide();
})
Animation

Animation in the middle of a web page can cause elements below the animated element to shift up and down as the element appears and disappears. To avoid this, you can use absolute positioning for the animated element. Elements with absolute positioning float above the content of the page. When visible, they may hide other elements.

#animatedElement {
	position: absolute;
	left: 100px;
	top: 200px;
}
/* Positions the element 100px from the left edge of the browser window and 200px from the top. */

To position an element relative to another element, specify position: relative on the container element and absolute positioning for the animated element.

#container {
	position: relative;
}
#animatedElement {
	position: absolute;
	left: 10px;
	top: 15px;
}
/* Positions the element 10px from the left edge of the container element and 15px from the top of the container element */
Callback Function

Callback functions run after the effect is complete and are added as last parameter to the effect.

$('#image1').fadeOut(slow, function() {
	$('#image2').fadeIn(slow);
});
/* Fades in image2 after image1 is finished fading out. */

Can be nested to chain several events together but not required if animation or effect applies to same element - they will be performed sequentially.

$('#image1').fadeOut(slow, function() {
	$('#image2').fadeIn(slow, function() {
		$('#caption2').show();
	});
});
/*Image1 fades out, then image2 fades in, then the caption is made visible. */