Built-in Effects

Contact Us or call 1-877-932-8228
Built-in Effects

Built-in Effects

Frequently used effects are built into jQuery as methods:

  • $.fn.show - Show the selected element(s). Without a duration parameter, the element is shown immediately. With a duration, the height and width of the element(s) are animated from zero to full-size over that duration.
  • $.fn.hide - Hide the selected element(s). Behavior is similar to show, but shrinking the element instead of expanding.
  • $.fn.fadeIn - Animate the opacity of the selected element(s) to 100%.
  • $.fn.fadeOut - Animate the opacity of the selected element(s) to 0%.
  • $.fn.slideDown - Display the selected element(s) with a vertical sliding motion.
  • $.fn.slideUp - Hide the selected element(s) with a vertical sliding motion.
  • $.fn.slideToggle - Show or hide the selected element(s) with a vertical sliding motion, depending on whether the elements are currently visible.
  • $.fn.delay - simply holds the current state for the specified period

You can run a series of effects on an element. If you invoke several effect methods on an element, the effects are queued up and run in succession, as opposed to in parallel (which is where delay comes in handy). You can also add other behaviors that aren't effects to the queue, like changing a class or CSS.

Basic Use of a Built-in Effects

$('h1').show();      // will appear immediately

$('h2').show(1000)   // will appear over 1 second,
	.hide(1000);       // and then disappear over another second

$('h3').show(1000);  // the same thing done as
$('h3').hide(1000);  // two separate method calls

$('h4').show(1000)   // will appear over 1 second
	.delay(1000)       // remain for 1 second
	.hide(1000);       // and then disappear over another second

Changing the Duration of Built-in Effects

With the exception of $.fn.show and $.fn.hide, all of the built-in methods are animated over the course of 400ms by default. Changing the duration of an effect is simple.

Setting the Duration of an Effect

$('h1').fadeIn(300);      // fade in over 300ms
$('h1').fadeOut('slow');  // using a built-in speed definition

jQuery.fx.speeds

jQuery has an object at jQuery.fx.speeds that contains the default speed, as well as settings for"slow" and "fast".

speeds: {
	slow: 600,
	fast: 200,
	// Default speed
	_default: 400
}

It is possible to override or add to this object. For example, you may want to change the default duration of effects, or you may want to create your own effects speed.

Augmenting jQuery.fx.speeds with Custom Speed Definitions

jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.turtle = 2000;
Next