Basic & Custom Effects JQ Home  <<  JQ Intermediate  <<  Basic & Custom Effects

• <<    DOM Removal & Replacement
• Fading & Sliding Effects     >>

jQuery has a lot of methods to dazzle our users with effects. We take a look at some basic and custom effects in this lesson.

The jQuery basic effects in this suite allow us to show or hide elements as well as toggle an element between shown and hidden.

The jQuery custom effect .animate() method allow us to perform a custom animation on a set of CSS properties.

Basic Effects

The .hide() Method Top

Hide the elements within the matched set.

We use the .hide( duration [, callback] ) signature in our examples below which will hide the matched set providing a duration and optionally a callback function.

The second signature .hide() will immediately hide the elements within the matched set without any animation.

The third signature .hide( [duration] [, easing] [, callback] ) will hide the matched set optionally providing a duration, and/or an easing and/or a callback function.

Examples of all three signatures are available in the reference section.

When we press the left button below we hide the image below on the left of chicken masala using a slow 'duration'.

When we press the right button below we first select all the images of chicken korma (class of 'curry3'). After this we use the .first() method to extract the first image in the set and pass this through the callback function. Within the function we use the .next() method to cycle through the images, hiding each in turn with an animation speed of 400 milliseconds.

$(function(){
  $('#btn2').on('click', function() {
    $('#curry2').hide('slow');
  });
  $('#btn3').on('click', function() {
    $('#div4 .curry3').first().hide(400, function() {
      // using 'callee' so we don't have to name the function
      $(this).next().hide(400, arguments.callee);
    });
  });
});

The .show() Method Top

Show the elements within the matched set.

We use the .show( [duration] [, easing] [, callback] ) signature in our examples below which will show the matched set optionally providing a duration, and/or an easing and/or a callback function.

The second signature .show() will immediately show the elements within the matched set without any animation.

The third signature .show( duration [, callback] ) will show the matched set providing a duration and optionally a callback function.

Examples of all three signatures are available in the reference section.

In the example below when the left button is pressed we use 'swing' easing to animate the picture as we show it.

When the centre button is pressed we use a callback to alert when the image is hidden.

When the right button is pressed we use a duration, easing and a callback to alert when the image is hidden.

$(function(){
  $('#btn10').on('click', function() {
    $('#pie4').show('swing');
  });
  $('#btn11').on('click', function() {
    $('#pie5').show(function() {
      alert('Animation finished.');
    });
  });
  $('#btn12').on('click', function() {
    $('#pie6').show('slow', 'swing', function() {
      alert('Animation complete.');
    });
  });
});

The .toggle() MethodTop

Show or hide the elements within the matched set.

We use the .toggle( showOrHide ) signature in our examples below which will show or hide the the matched set depending upon the boolean value of the parameter.

The second signature .toggle() will immediately show or hide the elements within the matched set without any animation.

The third signature .toggle( duration [, callback] ) will show or hide the matched set providing a duration and optionally a callback function.

The fourth signature .toggle( [duration] [, easing] [, callback] ) will show or hide the matched set optionally providing a duration, and/or an easing and/or a callback function.

Examples of all four signatures are available in the reference section.

In the example below When the left button is pressed if the image is shown it will be hidden.

When the right button is pressed when the image is hidden it will be shown.

$(function(){
  $('#btn14').on('click', function() {
    $('#curry8').toggle(false);
  });
  $('#btn15').on('click', function() {
    $('#curry8').toggle(true);
  });
});

Custom Effects

The .animate() Method Top

Perform a custom animation for a set of CSS properties.

We use the .animate( properties, options ) signature in our examples below which performs a custom animation for a set of CSS properties optionally providing a map of additional options.

The second signature .animate( properties [, duration] [, easing] [, complete] ) will perform a custom animation for a set of CSS properties optionally providing a duration, and/or an easing and/or a callback function.

In the example below we are using toggle properties with some options.

$(function(){
  $('#btn24').on('click', function() {
    $('#div1 .curry11').first().animate({
        width: 'toggle',
        height: 'toggle'
    },  {
        duration: 1200,
        specialEasing: {
          width: 'linear'
        },
        complete: function() {
          // using 'callee' so we don't have to name the function
          $(this).next().toggle(400, arguments.callee);
        }
    });
  });
});

Lesson 6 Complete

In this lesson we took a look at the jQuery basic and custom effects methods.

Related Tutorials

jQuery Intermediate - Lesson 7: Fading & Sliding Effects
jQuery Intermediate - Lesson 8: Controlling Effects

Reference

Methods

Events - .on() method
Traversal - .next() method
Effects - .animate() method
Effects - .hide() method
Effects - .show() method
Effects - .toggle() method

• <<    DOM Removal & Replacement
• Fading & Sliding Effects     >>