The show method
The show method smoothly shows hidden elements. You can hide elements using the hide method.
Syntax
Show for a given time in milliseconds, 400ms by default:
.show(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:
.show('slow' or either 'fast');
If you do not specify parameters, there will be no animation, the elements will be shown instantly:
.show();
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:
.show(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:
.show(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:
.show( {duration: 800, easing: easeInSine} );
Example
Let's smoothly show the hidden paragraph after pressing the button using the show 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>show text</button>
<p style="display: none">text</p>
$('button').click(function() {
$('p').show('slow', function() {
console.log('Animation complete')
});
});
