The hide method
The hide method smoothly hides elements. You can show elements using the show method.
Syntax
Fade in a given time, 400ms by default:
.hide(duration);
Time can be specified not only in milliseconds, but also using the keywords slow (600ms) and fast (200ms), the higher the value, the slower the animation:
.hide('slow' or either 'fast');
If you do not specify parameters, there will be no animation, the elements will be hidden instantly:
.hide();
You can also pass the smoothing function as the second parameter, and the callback function as the third parameter - it will be triggered after the animation is completed. Both parameters are optional:
.hide(duration, [smoothing function], [callback-function office]);
You can pass various options to the method, in the form of a JavaScript object containing key:value pairs:
.hide(options);
Such an object can pass the following parameters and functions - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. You can see the description of these parameters for the method animate. For example, let's set the duration and the smoothing function:
.hide( {duration: 800, easing: easeInSine} );
Example
After pressing the #test button, let's smoothly hide the paragraph using the hide method. By passing the slow keyword, we set the speed to 600ms. After the animation is finished, we output 'Animation complete' to the console:
<button id="test">hide text</button>
<p>text</p>
$('#test').click(function() {
$('p').hide('slow', function() {
console.log('Animation complete')
});
});
