.hide() JQ Home  <<  Effects  <<  .hide()

Hiding elements.

Description

The .hide() method is used to hide the matched set.

  • The display property of the element to be hidden is stored in the jQuery cache, so if the element is later made visible, the display property is restored to its initial value.
  • When any parameters are used, the .hide() method becomes an animation method:
    1. The .hide() method animates the height, width and opacity of the matched elements simultaneously.
    2. When these properties reach 0, the display property is set to none ensuring that the page layout is no longer affected by the element.

Syntax

Signature Description
.hide( )Hide the matched set.
.hide( duration [, callback] )Hide the matched set providing a duration and optionally a callback function.
.hide( [duration] [, easing] [, callback] )Hide the matched set optionally providing a duration, and/or an easing and/or a callback function.

Parameters

Parameter Description Type
durationA string or number determining the time the animation will run for.
default: 400
  • Durations are given in milliseconds and the higher the value, the slower the animation.
  • The string 'slow' can be used which equates to 600 milliseconds.
  • The string 'fast' can be used which equates to 200 milliseconds.
String or
Number
easingSpecify the speed at which the animation progresses at different points within the animation.
default: swing
  • The string 'swing' which is the default and causes the animation to animate faster at the beginnging/end and slower in the middle.
  • The string 'linear' which causes the animation to progress at a constant pace.
String
callbackA function that fires once the animation is complete.
  • The callback is fired in the context of the current element in the set being animated, so the keyword this refers to that element.
  • The callback is fired once for each element in the matched set and can be used to string different animations together in sequence.
 Function

Return

A jQuery object.

.hide() Example  Effects  <<  Top

Hide the matched set.

  • When used in its basic form with no parameters the .hide() method hides the element immediately with no animation.

In the example below when the button is pressed we hide the image below of thai green curry.

a picture of curry


$(function(){
  $('#btn1').on('click', function() {
    $('#curry1').hide();
  });
});

Press the buttons below to action the above code:

.hide( duration [, callback] ) Example Effects  <<  Top

Hide the matched set providing a duration and optionally a callback function.

In the example below when the left button is pressed we hide the image below on the left of chicken masala using a slow 'duration'.

When the right button is pressed 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 a animation speed of 400 milliseconds.

a picture of curry a picture of curry a picture of curry a picture of curry a picture of curry


$(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);
    });
  });
});

Press the buttons below to action the above code:

          

.hide( [duration] [, easing] [, callback] ) Example Effects  <<  Top

Hide the matched set optionally providing a duration, and/or an easing and/or a callback function.

In the example below when the left button is pressed we use 'swing' easing to animate the picture as we hide 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.

a picture of pie a picture of pie a picture of pie


$(function(){
  $('#btn4').on('click', function() {
    $('#pie1').hide('swing');
  });
  $('#btn5').on('click', function() {
    $('#pie2').hide(function() {
      alert('Animation finished.');
    });
  });
  $('#btn6').on('click', function() {
    $('#pie3').hide('slow', 'swing', function() {
      alert('Animation complete.');
    });
  });
});

Press the buttons below to action the above code:

               

Related Tutorials

jQuery Intermediate Tutorials - Lesson 6 - Basic & Custom Effects