Web Development with jQuery®

(^228) ❘ CHAPTER 8 ANIMATION AND EASING EFFECTS
$('input#exampleAnimationToggle').click(
function(event)
{
event.preventDefault();
if (!animating)
{
animating = true;
var easing = $('select#exampleAnimationEasing').val();
var duration = parseInt($('input#exampleAnimationDuration').val());
$('div#exampleDialog').toggle(
duration,
easing,
function()
{
animating = false;
}
);
}
}
);
$('input#exampleAnimationDuration').change(
function()
{
$(this).attr('title', $(this).val());
}
);
}
);
The preceding example is Example 8-1 in the source code download materials. Figure 8-1 shows the
results of loading up Example 8-1.html in a browser.
In Example 8-1, you created an application that allows you to test the most-used aspects of the show(),
hide(), and toggle() methods. This includes testing every possible type of easing offered in both
default jQuery and the various easing extensions offered as part of jQuery UI. All the easings offered
by jQuery are specifi ed in the element that you created to make it easy to test each easing.
Along with easing, you also provide a duration to each method that is provided by the range
element. The duration argument is specifi ed in milliseconds; 1,000 milliseconds equal 1 second.
Aside from providing an integer value representing the number of milliseconds, you can also provide
a duration-preset string. jQuery offers three duration-preset strings: 'slow', 'normal', and 'fast'. If
no duration is specifi ed, the default duration is the 'normal' preset.
The script that you created begins by setting up a variable to keep track of whether an animation
is in progress. The purpose of this variable is to prevent multiple animations from backing up and
occurring one after another by repeatedly clicking any of the buttons while an animation is in prog-
ress. When an animation is initiated, the animating variable is set to true, which prevents additional
animations from occurring while that initial animation is in progress. When an animation com-
pletes, the callback function provided to each method is executed and the animating variable is reset
to false, which allows a new animation to take place.
http://www.it-ebooks.info