jQuery 1.4 Animation Techniques Beginner''''s Guide pptx

www.it-ebooks.info
jQuery 1.4 Animation Techniques
Beginner's Guide
Quickly master all of jQuery's animaon methods and build
a toolkit of ready-to-use animaons using jQuery 1.4
Dan Wellman
BIRMINGHAM - MUMBAI
www.it-ebooks.info
jQuery 1.4 Animation Techniques
Beginner's Guide
Copyright © 2011 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system,
or transmied in any form or by any means, without the prior wrien permission of the
publisher, except in the case of brief quotaons embedded in crical arcles or reviews.
Every eort has been made in the preparaon of this book to ensure the accuracy of the
informaon presented. However, the informaon contained in this book is sold without
warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers
and distributors will be held liable for any damages caused or alleged to be caused directly
or indirectly by this book.
Packt Publishing has endeavored to provide trademark informaon about all of the
companies and products menoned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this informaon.
First published: March 2011
Producon Reference: 1140311
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-849513-30-2
www.packtpub.com
Cover Image by Filippo ()

www.it-ebooks.info
Credits
Author
Dan Wellman
Reviewers
Shaiful Islam
Ben Nadel
Cyril Pierron
Acquision Editor
Sarah Cullington
Development Editor
Roger D'souza
Technical Editor
Conrad Sardinha
Indexer
Hemangini Bari
Editorial Team Leader
Akshara Aware
Project Team Leader
Priya Mukherji
Project Coordinator
Sneha Harkut
Proofreader
Aaron Nash
Producon Coordinator
Melwyn D'sa
Cover Work
Melwyn D'sa
www.it-ebooks.info
Foreword

Since the rst jQuery homepage in 2006, an interacve example introduced visitors to jQuery
with a single line of code, and a buon to run that code. When clicked, it added a class to a
hidden paragraph, and animated that paragraph to become visible.
Today, in late 2010, the API documentaon has 15 methods listed in the Eects category.
These provide built-in animaons for fading and sliding, as well as various ways to create
custom animaons. When combined with color and class animaons and custom easings
that jQuery UI provides, there are even more ways to create animaons.
A good rule of thumb for using animaons is to use slides when showing elements within
the pageow, and fades for overlays, like a toolp. But that's just a rule of thumb, and with
all the tools available there's a lot more opportunity to improve interacons, as well as
messing them up.
With that in mind, a full book on animaons starts to make a lot of sense. It makes even
more sense when also taking into account upcoming technologies which aren't bound to
jQuery directly, like CSS3 animaons or animated canvas drawings.
As a tech reviewer I've worked with Dan on his jQuery UI 1.6 and jQuery UI 1.7 books. At the
me the jQuery UI team was sll guring out the scope and exact direcon of the project,
including several direcon changes at the me when Dan was wring the rst book. Despite
these challenges Dan did a great job providing documentaon and extensive examples on
how to use and combine the widgets and interacons jQuery UI provides.
With this book Dan brings his experience in wring on jQuery topics to teach you when
and how to use animaons to create beer user experiences. I hope it serves you well.
Jörn Zaeerer
jQuery UI development lead, plugin author, and QUnit maintainer
www.it-ebooks.info
About the Author
Dan Wellman is an author and web developer based on the South coast of the UK. By day
he works alongside some of the most talented people he has had the pleasure of calling
colleagues, for a small, yet accomplished digital agency called Design Haus. By night he
writes books and tutorials on a range of frontend topics. He is hopelessly addicted to jQuery.
His life is enriched by four wonderful children, a beauful wife, and a close circle of family

and friends. This is his h book.
I would like to thank the hugely supporve and paent editorial team at
Packt, without whom this book would not exist. I would also like to thank
the reviewers, especially Ben Nadel and Cyril Pierron, who put aside
their own personal projects and dedicated countless hours to ensuring
the book's technical accuracy. I'd also like to say a big Hey! to some of
my closest friends, in no parcular order; Andrew Herman, Steev Bishop,
Aaron Matheson, Eamon O'Donoghue, James Zabiela, Mike Woodford, and
John Adams.
www.it-ebooks.info
About the Reviewers
Shaiful Islam completed his graduaon in Computer Science and Engineering (CSE) from
IIUC (Internaonal Islamic University Chiagong), and loves web development and PHP.
He is a Soware Engineer, with three years of experience in web development and a
keen lover of web technology. He also loves CSS, JQuery, CodeIgniter, Cakephp, and Zend
Framework, which showed him the way to develop his career in web development and the
programming eld.
His moo is: Work through best approach, commitment, skill, and keep smiling.
Currently he is working for "bGlobal Sourcing LLC" as a Soware Engineer.
I would like to thank all of my friends, colleagues, and those senior
brothers who reviewed this type of book before and from whom I got
inspiraon. Special thanks to everyone at Packt Publishing.
Ben Nadel is the chief soware engineer at Epicenter Consulng, a Manhaan-based web
applicaon development rm specializing in innovave custom soware that transforms
the way its clients do business. He is also an Adobe Community Professional as well as an
Adobe Cered Professional in Advanced ColdFusion. In his spare me, he blogs extensively
about all aspects of obsessively thorough web applicaon development at http://www.
bennadel.com/
.
www.it-ebooks.info

Cyril Pierron is an engineer, a web addict, tech savvy, and life curious. He started
programming at age 8, and has been working in telecommunicaons for the past 12 years.
He is married and a father of a lovely baby girl.
I would actually like to thank Twier which gave me the opportunity to see
Packt Publishing message when they were looking for reviewers. Obviously
thanks to the Packt Publishing team for giving me the chance to work on
one of their tles. Lots of thanks to Dan Wellman who I actually followed
on Twier previously to realizing I was reviewing one of his books. This is
an amazing piece that draws inspiraon and Dan is the most cheerful,
open minded, and supporve person. Finally thanks to my wife who
showed quite some paence and support when I kept working on this
book aer hours.
www.it-ebooks.info
www.PacktPub.com
Support les, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support les and downloads related to
your book.
Did you know that Packt oers eBook versions of every book published, with PDF and ePub
les available? You can upgrade to the eBook version at www.PacktPub.com and as a print
book customer, you are entled to a discount on the eBook copy. Get in touch with us at
for more details.
At www.PacktPub.com, you can also read a collecon of free technical arcles, sign up
for a range of free newsleers and receive exclusive discounts and oers on Packt books
and eBooks.

Do you need instant soluons to your IT quesons? PacktLib is Packt's online digital book
library. Here, you can access, read and search across Packt's enre library of books.
Why Subscribe?
 Fully searchable across every book published by Packt
 Copy and paste, print and bookmark content

 On demand and accessible via web browser
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access
PacktLib today and view nine enrely free books. Simply use your login credenals for
immediate access.
www.it-ebooks.info
www.it-ebooks.info
www.it-ebooks.info
For Pat Spacagna, the greatest mother-in-law I could have wished for. You are fondly
remembered, but sorely missed. May you rest in peace always.
www.it-ebooks.info
www.it-ebooks.info
Table of Contents
Preface 1
Chapter 1: Introducon 7
Animaon on the Web 7
The power of animated UIs 8
When to use animaons 9
When not to use animaons 10
Animaon checklist 10
Animang with jQuery 10
The template le 11
Creang a project folder 13
A basic animaon example 13
Time for acon – creang an animated loader 14
Summary 17
Chapter 2: Fading Animaons 19
Fading animaons 20
Conguring the animaons with arguments 20
jQuery's Unied Animaon API 21

Enhancing simple CSS hover states with fadeIn 22
Time for acon – adding the underlying markup and styling 23
Time for acon – scripng the animaon 25
Fading elements out 27
Time for acon – creang the dialog 29
Fading PNGs in IE 31
Using fadeToggle() for convenient state-checking logic 33
Time for acon – showing and hiding with fadeToggle() 34
Greater opacity control with fadeTo() 36
Animang to paral opacity 37
Time for acon – creang the example page 38
www.it-ebooks.info
Table of Contents
[ ii ]
Time for acon – adding the behavior 39
Fading table-rows in Internet Explorer 43
Time for acon – fading table-rows in IE 43
Showing and hiding 46
Flyout submenus with jQuery's show/hide logic 47
Time for acon – animaons with show/hide 49
Animated toggling 52
Time for acon – replacing show and hide with toggle 52
Summary 53
Chapter 3: Managing Animaons 55
Working with the queue 56
Viewing the queue 57
Time for acon - viewing the queue 57
Adding a funcon to the queue 61
Time for acon – adding a single funcon to the queue 61
Using a callback funcon to keep the queue moving 62

Time for acon – keeping the queue running 62
Replacing the queue 63
Time for acon – replacing the queue 63
Ensuring custom queues iterate correctly 65
Time for acon – dequeueing funcons 66
Stopping an animaon 66
Time for acon – prevenng animaon build-up using the stop method 68
Delaying queue execuon 69
Clearing the queue 69
Useful properes of the jQuery object 70
Globally disabling animaons 70
Changing the default frame rate 70
Summary 71
Chapter 4: Sliding Animaons 73
Sliding elements into view 74
Time for acon – creang a slide-down login form 75
Sliding elements out of view 79
Time for acon – sliding elements up 80
Toggling the slide 83
Time for acon – using slideToggle 83
Easing 89
Time for acon – adding easing 90
Using an object literal to add easing 91
Time for acon – using the alternave argument format 91
www.it-ebooks.info
Table of Contents
[ iii ]
The icker eect 92
Time for acon – avoiding the icker eect 92
Time for acon – xing the icker 97

Summary 99
Chapter 5: Custom Animaons 101
The animate method 102
Per-property easing 102
An alternave syntax for animate() 103
Animang an element's posion 103
Time for acon – creang an animated content viewer 104
Time for acon – inializing variables and prepping the widget 106
Time for acon – dening a post-animaon callback 107
Time for acon – adding event handlers for the UI elements 109
Skinning the widget 111
Time for acon – adding a new skin 111
Time for acon – creang the underlying page and basic styling 114
Time for acon – dening the full and small sizes of the images 115
Time for acon – creang the overlay images 116
Time for acon – creang the overlay wrappers 116
Time for acon – maintaining the overlay posions 119
Creang a jQuery animaon plugin 121
Time for acon – creang a test page and adding some styling 122
Creang the plugin 124
Time for acon – adding a license and dening congurable opons 124
Time for acon – adding our plugin method to the jQuery namespace 125
Time for acon – creang the UI 127
Time for acon – creang the transion overlay 129
Time for acon – dening the transions 130
Using the plugin 132
Summary 135
Chapter 6: Extended Animaons with jQuery UI 137
Obtaining and seng up jQuery UI 138
A new template le 139

The new eects added by jQuery UI 139
Using the eect API 140
The bounce eect 141
Conguraon opons 141
Time for acon – using the bounce eect 141
The highlight eect 143
Conguraon opons 143
www.it-ebooks.info
Table of Contents
[ iv ]
Time for acon – highlighng elements 143
The pulsate eect 145
Conguraon opons 145
Time for acon – making an element pulsate 145
The shake eect 147
Conguraon opons 147
Time for acon – shaking an element 147
The size eect 149
Conguraon opons 149
Time for acon – resizing elements 150
The transfer eect 152
Conguraon opons 152
Time for acon – transferring the outline of one element to another 152
Using eects with show and hide logic 155
The blind eect 155
Conguraon opons 156
Time for acon – using the blind eect 156
The clip eect 157
Conguraon opons 157
Time for acon – clipping an element in and out 158

The drop eect 159
Conguraon opons 160
Time for acon – using the eect 160
The explode eect 162
Conguraon opons 162
Time for acon – exploding an element 163
The fold eect 164
Conguraon opons 164
Time for acon – folding an element away 164
The pu eect 166
Conguraon opons 166
Time for acon – making an element disappear in a pu 166
The slide eect 168
Conguraon opons 168
Time for acon – sliding elements in and out of view 168
The scale eect 170
Conguraon opons 170
Time for acon – scaling an element 170
Easing funcons 173
Time for acon – adding easing to eects 174
Color animaons 174
Time for acon – animang between colors 174
Class transions 176
www.it-ebooks.info
Table of Contents
[ v ]
Time for acon – transioning between classes 176
Summary 178
Chapter 7: Full Page Animaons 179
Animated page scroll 179

Time for acon – creang the page that will scroll and its styling 180
Time for acon – animang the scroll 183
The illusion of depth with parallax 186
A lile help from the new cssHooks funconality 186
Time for acon – creang the stage and adding the styling 187
Time for acon – animang the background posion 188
Animated single-page navigaon 190
Time for acon – creang individual pages and adding the styles 190
Time for acon – adding the scroll navigaon 193
Stop-moon animaon 201
Imagery 201
Technique 201
Time for acon – adding the markup and styling 202
Time for acon – creang the frames and running the animaon 202
Summary 205
Chapter 8: Other Popular Animaons 207
Proximity animaons 207
Time for acon – creang and styling the page 208
Time for acon – prepping the page for sliding funconality 210
Time for acon – animang the scroller 213
Time for acon – adding the mouse events 214
Time for acon – adding keyboard events 215
Animated page headers 217
Time for acon – creang an animated header 218
Marquee text 219
Time for acon – creang and styling the underlying page 220
Time for acon – retrieving and processing the post list 222
Time for acon – animang the post links 227
Summary 229
Chapter 9: CSS3 Animaons 231

CSS3 2D transforms 231
Understanding the matrix 232
Translate 233
Scale 234
Skew 236
Rotaon 237
Working with transforms 238
www.it-ebooks.info
Table of Contents
[ vi ]
jQuery and transforms 238
Internet Explorer transforms 239
CSS3 3D transforms 241
Animated rotaon with jQuery and CSS3 242
Time for acon – animang an element's rotaon 242
Problems with IE 246
Animated skewing 247
Time for acon – creang the underlying markup 248
and basic styling 248
Time for acon – inializing the widget 250
Time for acon – animang an element's skew 254
Time for acon – skewing an element from le to right 259
Time for acon – wiring up the controls 262
Summary 263
Chapter 10: Canvas Animaons 265
The canvas API 266
The canvas element 266
Context methods 267
Nave shapes 267
Paths 268

Images and paerns 269
Text 270
Transformaon methods 271
Pixel manipulaon 271
Drawing to the canvas 272
Time for acon – drawing to the canvas 272
Canvas, IE, and the alternaves 277
API methods that simply do not work 277
Time for acon – making our code compable with IE 278
Animang the canvas 281
Time for acon – creang an animaon on the canvas 282
Time for acon – animang the white crosses 284
Time for acon – animang the red crosses 286
Creang a canvas game 290
Time for acon – creang the inial page 290
Time for acon – the inial script 292
Time for acon – adding the aliens to the page 293
Time for acon – moving the aliens 294
Time for acon – adding handlers to control the ship 297
Summary 301
www.it-ebooks.info
Table of Contents
[ vii ]
Pop Quiz Answers 303
Chapter 1 303
Basic animaon with jQuery 303
Chapter 2 303
Using fadeIn 303
Using fadeOut 303
Using fadeToggle() 304

Using fadeTo 304
Using show and hide 304
Chapter 3 304
Viewing the queue 304
Adding new items to the array 304
Keeping the queue running 305
Replacing the queue 305
Stopping an animaon 305
Chapter 4 305
Sliding elements down 305
Sliding elements up 305
Using slideToggle 306
Using easing 306
Fixing the icker 306
Chapter 5 306
Creang an animated content-viewer 306
Creang expanding images 306
Creang a plugin 307
Chapter 6 307
Using the eect API 307
Using show/hide logic 307
Easing, color, and class animaons 307
Chapter 7 307
Animang page scroll 307
Implemenng the parallax eect 308
Creang a single-page website 308
Implemenng stop-moon animaon with jQuery 308
Chapter 8 308
Implemenng proximity animaons 308
Creang a marquee scroller 308

Chapter 9 309
Implemenng CSS3 rotaon 309
Using the matrix 309
Chapter 10 309
www.it-ebooks.info
Drawing to the canvas 309
Supporng IE 309
Animang the canvas 310
Creang canvas-based games 310
Index 311
www.it-ebooks.info
Preface
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripng of
HTML, and is the most popular JavaScript library in use today. Using the features oered by
jQuery, developers are able to create dynamic web pages. This book will act as a resource for
you to create animaon and advanced special eects in your web applicaons, by following
the easy-to-understand steps menoned in it.
jQuery 1.4 Animaon Techniques: Beginner's Guide will allow you to master animaon in
jQuery to produce slick and aracve interfaces that respond to your visitors' interacons.
You will learn everything you need to know about creang engaging and eecve web
page animaons using jQuery. The book uses many examples and explains how to create
animaons using an easy, step-by-step, beginner's guide approach.
This book provides various examples that gradually build up the reader's knowledge and
praccal experience in using the jQuery API to create stunning animaons. The book starts
o by explaining how animaons make your user interface interacve and aracve.
It explains the various methods used to make the element being animated appear or
disappear. It provides a set of steps to create simple animaons and show fading animaons.
You can later learn how to make complex animaons by chaining dierent eects
together as well as how to halt a currently running applicaon. You will nd out how
to slide your animaon elements and learn to create custom animaons that can be

complex and specialized.
You will nd out how to obtain and set up the jQuery UI—the ocial user interface library
for jQuery. This book will tell you how to animate a page's background image, and will teach
you how to make images scroll in a certain direcon and at a certain speed depending on the
movement of the mouse pointer.
www.it-ebooks.info
Preface
[ 2 ]
What this book covers
Chapter 1, Introducon covers the basics including downloading jQuery and seng up a
development area, a brief history of animaon on the Web, when and where not to use
animaon, how animaon can enhance an interface, and the animaon methods exposed
by jQuery. A basic example of animaon is also covered.
Chapter 2, Fading Animaons looks at the fading family of animaon methods including
fading elements in and out, fade toggling, triggering animaons with
show(), hide(),
and toggle(), and fading an element to a specic opacity.
Chapter 3, Managing Animaons covers the animaon queue and the methods jQuery
provides for managing it. We see how to clear the queue, how to add funcons to it, and
how to clear it. We see how to add a delay between queued items and how to prevent
animaons building up in the queue when they are not required.
Chapter 4, Sliding Animaons looks at jQuery's sliding animaon and covers how to slide
elements in an out of view and how to toggle the slide based on their current state. We also
look at how CSS posioning can aect animaons and how to avoid a common piall when
using these methods in a drop-down menu.
Chapter 5, Custom Animaons focuses on the
animate() method, which jQuery provides
for us as a means of creang custom animaons not already predened. This extremely
powerful method allows us to animate almost any CSS-style property to easily create
complex and aracve animaons.

Chapter 6, Extended Animaons with jQuery UI looks at the addional eects added by
jQuery UI, the ocial UI library built on top of jQuery. We look at each of the 14 new
eects as well as covering the easing funcons built into the library.
Chapter 7, Full Page Animaons looks at animaons that form the main focus of the page.
Techniques we cover include animang page scroll, creang a parallax eect, and creang
basic stop-moon animaons.
Chapter 8, Other Popular Animaons looks at some common types of animaons found on
the web including proximity animaons triggered by the mouse pointer, animated headers,
and a modern-day equivalent to the marquee element.
Chapter 9, CSS3 Animaons covers how we can use CSS3 to create aracve animaons
driven by the latest CSS transforms and how jQuery can be used to make the process easier,
including the latest cssHooks funconality.
Chapter 10, Canvas Animaons looks at the HTML5 canvas element and shows how it
can be used to create stunning animaons without the use of Flash or other proprietary
technologies. The book closes with an in-depth example teaching how to create an
interacve game using nothing but HTML and JavaScript.
www.it-ebooks.info
Preface
[ 3 ]
What you need for this book
To get the most out of this book you should have some knowledge of frontend development,
preferably including JavaScript. Experience with jQuery is also preferable, but is not essenal
as all techniques used in the book are discussed in full.
You should have a computer capable of running the latest browsers and preferably an Internet
connecon. A code eding development soware package will be of help, but again is not
essenal provided you have a text editor of some descripon.
Who this book is for
This book is wrien for web designers and frontend developers who already have good
knowledge of HTML and CSS, and some experience with jQuery. If you want to learn how to
animate the user interface of your web applicaons with jQuery, then this book is for you.

Conventions
In this book, you will nd several headings appearing frequently.
To give clear instrucons of how to complete a procedure or task, we use:
Time for action – heading
1. Acon 1
2. Acon 2
3. Acon 3
Instrucons oen need some extra explanaon so that they make sense, so they are
followed with:
What just happened?
This heading explains the working of tasks or instrucons that you have just completed.
You will also nd some other learning aids in the book, including:
Pop quiz – heading
These are short mulple choice quesons intended to help you test your own understanding.
www.it-ebooks.info
Preface
[ 4 ]
Have a go hero – heading
These set praccal challenges and give you ideas for experimenng with what you
have learned.
You will also nd a number of styles of text that disnguish between dierent kinds of
informaon. Here are some examples of these styles, and an explanaon of their meaning.
Code words in text are shown as follows: "The
fadeIn() and fadeOut() methods perform
the least complex animaons available via jQuery".
A block of code is set as follows:
$("#fader").fadeOut(function() {
console.log($(this).queue());
}).fadeIn().fadeOut().fadeIn();
When we wish to draw your aenon to a parcular part of a code block, the relevant lines

or items are set in bold:
subMenuParent.mouseenter(function() {
$(this).find("ul").toggle("fast");
});
New terms and important words are shown in bold. Words that you see on the screen, in
menus or dialog boxes for example, appear in the text like this: "In this case, we clear the
whole canvas, removing the space ship and any surviving aliens, and print the text GAME
OVER! to the center of the canvas".
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
www.it-ebooks.info