Web Development with jQuery®

(^230) ❘ CHAPTER 8 ANIMATION AND EASING EFFECTS
);
}
}
);
The fi rst thing that happens when a click takes place is the event.preventDefault() method. This
prevents the

from submitting to the URL specifi ed in the action attribute.
animating = true;
You then check the animating variable to ensure that an animation is not in progress. If the value of
the animating variable is false, then the next statement dependent on that condition is executed. If
the value of the animating variable is true, then nothing happens and the callback function supplied
to the click() method concludes execution.
var easing = $('select#exampleAnimationEasing').val();
The value of the element with id name exampleAnimationDuration is converted to
an integer data type with parseInt() and assigned to the duration variable. The duration variable
then goes on to stand in for the duration argument of the show() method.
$('div#exampleDialog').show(
duration,
easing,
function()
{
animating = false;
}
);
The show() method is applied to the

with the id name exampleDialog.
All the arguments provided to the show() method are optional. If the show() method is called with no
arguments, no animation takes place and only the CSS display property is set to display the element; for
a

element the display property would be set to block. If only the duration argument is specifi ed,
the action of displaying the element is animated via the provided duration with the default easing 'swing'.
The callback function provided to the show() method is executed when the animation has com-
pleted. In this case, the callback function resets the value of the animating variable to false so that
additional animations can take place.
The remainder of the script repeats the logic of the click() event assigned to the element
with the id name exampleAnimationShow on two additional elements. The with id
name exampleAnimationHide receives a similar click() event that swaps out the show() method for
the hide() method. Likewise, the element with id name exampleAnimationToggle receives a
click() event that swaps out the show() method for the toggle() method, which completes this dem-
onstration of the show(), hide(), and toggle() methods.
http://www.it-ebooks.info

Free download pdf

Web Development with jQuery®

Get our desktop app

Company

Features

Documentation

Resources