Sliding Elements (^) ❘ 231
Sliding Elements
jQuery also provides the ability to animate an element by sliding. Sliding in jQuery is animating
an element’s height. Sliding down animates an element’s height from nothing to its normal height.
Sliding up animates an element’s height from its normal height to nothing. These two actions are
accomplished using the slideDown(), slideUp(), and slideToggle() methods.Sliding is another way to reveal and hide elements—you just use a different animation to accomplish
the task. The slideDown(), slideUp(), and slideToggle() methods are demonstrated in the following
example, which modifi es the document created in Example 8-1. This document also appears in the
source code download materials as Example 8-2. To save space, the following example shows only
the differences between Example 8-1 and Example 8-2.<input type='submit'
name='exampleAnimationShow'
id='exampleAnimationShow'
value='Slide Down' />
<input type='submit'
name='exampleAnimationHide'
id='exampleAnimationHide'
value='Slide Up' />
<input type='submit'
name='exampleAnimationToggle'
id='exampleAnimationToggle'
value='Toggle Slide' />
</div>
</fieldset>In the HTML document, only the value attributes of the submit <input> elements are modifi ed to
refl ect the updated actions.The only modifi cation to the style sheet is to the background color of the <h4> element within the dia-
log. This is done so that you can more easily see a difference between Example 8-1 and Example 8-2
when testing the script in a browser.div#exampleDialog h4 {
border: 1px solid rgb(50, 50, 50);
background: lightgreen;
border-radius: 4px;
padding: 5px;
margin: 0 0 10px 0 ;
}The following script replaces the show(), hide(), and toggle() methods from Example 8-1 with the
slideDown(), slideUp(), and slideToggle() methods.$(document).ready(
function()
{
var animating = false;$('input#exampleAnimationShow').click(
function(event)