Effects and duration

When we include a duration (sometimes also referred to as a speed) with .show() or .hide(), it becomes animated—occurring over a specified period of time. The .hide(duration) method, for example, decreases an element's height, width, and opacity simultaneously until all three reach zero, at which point the CSS rule display: none is applied. The .show(duration) method will increase the element's height from top to bottom, width from the left-hand side to the right-hand side, and opacity from 0 to 1 until its contents are completely visible.

Speeding in

With any jQuery effect, we can use one of the two preset speeds, 'slow' or 'fast'. Using .show('slow') makes the show effect complete in 600 milliseconds (0.6 seconds), .show('fast') in 200 milliseconds. If any other string is supplied, jQuery's default animation duration of 400 milliseconds will be used. For even greater precision, we can specify a number of milliseconds: for example, .show(850). Note that in this case...