jQuery in Action

Creating custom animations
147
The term easing is used to describe the manner in which the processing and
pace of the frames of the animation are handled. By using some fancy math on the
duration of the animation and current time position, some interesting variations
to the effects are possible. The subject of writing easing functions is a complex,
niche topic that's usually only of interest to the most hard-core of plugin authors;
we're not going to delve into the subject of custom easing functions in this book. If
you'd like to sample more easing functions than linear (which provides a linear
progression) or swing (which speeds up slightly near the end of an animation),
check out the Easing Plugin at http://gsgd.co.uk/sandbox/jquery.easing.php.
By default, animations are added to a queue for execution; applying multiple
animations to an object will cause them to run serially. If you'd like to run anima-
tions in parallel, set the
queue
option to
false
.
The list of
CSS
style properties that can be animated is limited to those that
accept numeric values for which there is a logical progression from a start value to
a target value. This numeric restriction is completely understandable--how
would we envision the logical progress from a source value to an end value for a
non-numeric property such as
image-background
? For values that represent
dimensions, jQuery assumes the default unit of pixels, but we can also specify em
units or percentages by including the em or % suffixes.
Frequently animated style properties include
top
,
left
,
width
,
height
, and
opacity
. But if it makes sense for the effect we want to achieve, numeric style
properties such as font size and border widths can also be animated.
NOTE
If you want to animate a
CSS
value that specifies a color, you may be inter-
ested in the official jQuery Color Anplugins/project/color.
In addition to specific values, we can also specify one of the strings
hide
,
show
, or
toggle
; jQuery will compute the end value as appropriate to the specification of
the string. Using
hide
for the
opacity
property, for example, will result in the
opacity of an element being reduced to 0. Using any of these special strings has
the added effect of automatically revealing or removing the element from the dis-
play (like the
hide()
and
show()
commands).
Did you notice when we introduced the core animations that there was no
toggling command for the fade effects? That's easily solved using
animate()
and
toggle as follows:
$('.animateMe').animate({opacity:'toggle'},'slow');


Другие страницы

 
Cкачать книги бесплатно без регистрации в электронном виде (pdf, chm, txt).Вы можете читать книги онлайн на нашем сайте литературного портала книг.Большая подборка учебников, пособий, интересных книг.Электронные книги на английском языке скачать бесплатно без смс.