Effects

Next to events, jQuery also provides a handful of customizable effects. These effects come by the way of different methods, including event methods for showing and hiding content, fading content in and out, or sliding content up and down. All of these are ready to use methods and may be customized as best see fit.

Effect Duration

Using the .show() method as an example, the first parameter available to optionally pass in to the method is the duration, which can be accomplished using a keyword or milliseconds value. The keyword slow defaults to 600 milliseconds, while the keyword fast defaults to 200 milliseconds. Using a keyword value is fine, but millisecond values may also be passed in directly. Keyword values must be quoted while millisecond values do not.

$('.error').show();
$('.error').show('slow');
$('.error').show(500);

Effect Callback

When an animation is completed it is possible to run another function, called a callback function. The callback function should be placed after the duration or easing, if either exist. Inside this function new events or effects may be placed, each following their own required syntax.

$('.error').show('slow', 'linear', function(event){
  $('.error .status').text('Continue');
});

Effect Syntax

As previously mentioned, each effect method has it’s own syntax which can be found in the jQuery effects documentation. The duration, easing, and callback parameters outlined here are common, but not available on every method. It is best to review the syntax of a method should you have any questions around it.

Effects Demo

Taking the same events demo from above, the .remove() method is now used as part of a callback function on the .fadeOut() method. Using the .fadeOut() method allows for the alert message to gradually fade out rather than quickly disappearing, then be removed from the DOM after the animation is complete.

HTML
<div class="alert-warning">
  <strong>Warning!</strong> I’m about to lose my cool.
  <div class="alert-close">×</div>
</div>
JAVASCRIPT
$('.alert-close').on('click', function(event){
  $('.alert-warning').fadeOut('slow', function(event){
    $(this).remove();
  });
});

Basic Effects .hide().show().toggle() Custom Effects .animate().clearQueue().delay().dequeue()jQuery.fx.intervaljQuery.fx.off.queue().stop() Fading Effects .fadeIn().fadeOut().fadeTo().fadeToggle() Sliding Effects .slideDown().slideToggle().slideUp()

Slide Demo

HTML
<div class="panel">
  <div class="panel-stage" style="display:none">HTML or Some text ...</div>
  <a href="#" class="panel-tab">Open <span>▼</span></a>
</div>

JAVASCRIPT
$('.panel-tab').on('click', function(event){
  event.preventDefault();
  $('.panel-stage').toggle('slow', function(event){
    if($(this).is(':visible')){
      $('.panel-tab').html('Close ▲');
    } else {
      $('.panel-tab').html('Open ▼');
    }
  });
});

Demo of above code

Open ▼

Effects Types

Basic Effects
.hide()
.show()
.toggle()

Custom Effects
.animate()
.clearQueue()
.delay()
.stop()

Fading Effects
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()

Sliding Effects
.slideDown()
.slideToggle()
.slideUp()