Visibility of elements

jQuery provides methods to control visibility of elements.

One variation of methods accepts time of animation duration and callback function cbComplete as arguments. Other variation accept the options object opt as argument.

$( ".target" ).show();

// With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() { // show/fadeIn/slideDown
  $( "#book" ).show( "slow", function() {
    // Animation complete
  });
});
method description
show([duration] [,cbComplete]) Shows the selected elements.
show(opt) Shows the selected elements using a specified options.
hide([duration] [,cbComplete]) Hides the selected elements.
hide(opt) Hides the selected elements using the specified options.
toggle([duration] [,cbComplete]) Shows or hides the selected elements.
toggle(opt) Shows or hides the selected elements using the specified options.
fadeIn([duration] [,cbComplete]) Displays the selected elements by fading them to opaque.
fadeIn(opt) Displays the selected elements by fading them to opaque using the specified options.
fadeOut([duration] [,cbComplete]) Hides the selected elements by fading them to transparent.
fadeOut(opt) Hides the selected elements by fading them to transparent using the specified options.
fadeToggle([duration] [,easing][,cbComplete]) Displays or hides the selected elements by animating their opacity.
fadeTo(duration, opacity [,cbComplete]) Adjusts the opacity of the selected elements.
fadeTo( duration, opacity [,cbComplete]) Adjusts the opacity of the selected elements.
slideDown([duration][,cbCcomplete]) Displays the selected elements with a sliding motion.
slideDown(opt) Displays the selected elements with a sliding motion.
slideUp( [duration] [,cbCcomplete]) Hides the selected elements with a sliding motion.
slideUp(opt) Hides the selected elements with a sliding motion.
slideToggle([duration][,cbCcomplete]) Displays or hides the selected elements with a sliding motion.
slideToggle(opt) Displays or hides the selected elements with a sliding motion.

options object

The options object is a map of additional options to pass to the some methods.

property description
duration A string or number determining how long the animation will run. Default value is 400 ms. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.
easing A string indicating which easing function to use for the transition. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear.
queue A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call dequeue("queuename") to start it. Default value is true.
specialEasing An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions.
step A function func(now, tween)to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
progress A function func(aniPromise, progress, remainingMs)to be called after each step of the animation, only once per animated element regardless of the number of animated properties.
complete A function that is called once the animation on an element is complete.
start A function func(aniPromise) that is called when the animation on an element begins.
done A function func(aniPromise, isJumpedToEnd) that is called when the animation on an element completes (its Promise object is resolved).
fail A function func(aniPromise, isJumpedToEnd) that is called when the animation on an element fails to complete (its Promise object is rejected).
always A function func(aniPromise, isJumpedToEnd) that is called when the animation on an element completes or stops without completing (its Promise object is either resolved or rejected).