jQuery 1.4 Animation Techniques Beginner's Guide

Table of Contents

jQuery 1.4 Animation Techniques Beginner's Guide

Credits

Foreword

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Time for action – heading

What just happened?

Pop quiz – heading

Have a go hero – heading

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Introduction

Animation on the Web

The power of animated UIs

When to use animations

When not to use animations

Animation checklist

Animating with jQuery

The template file

Creating a project folder

A basic animation example

Time for action – creating an animated loader

What just happened?

Pop quiz – basic animation with jQuery

Have a go hero – extending the loading animation

Summary

2. Fading Animations

Fading animations

Configuring the animations with arguments

jQuery's Unified Animation API

Enhancing simple CSS hover states with fadeIn

Time for action – adding the underlying markup and styling

What just happened?

Time for action – scripting the animation

What just happened?

Pop quiz – using fadeIn

Have a go hero – doing more with fadeIn

Fading elements out

Time for action – creating the dialog

What just happened?

Pop quiz – using fadeOut

Have a go hero – doing more with fadeout

Fading PNGs in IE

Using fadeToggle() for convenient state-checking logic

Time for action – showing and hiding with fadeToggle()

What just happened?

Pop quiz – using fadeToggle()

Have a go hero – extending fadeToggle()

Greater opacity control with fadeTo()

Animating to partial opacity

Time for action – creating the example page

What just happened?

Time for action – adding the behavior

What just happened?

Pop quiz – using fadeTo

Have a go hero – doing more with fadeTo

Fading table-rows in Internet Explorer

Time for action – fading table-rows in IE

What just happened?

Showing and hiding

Flyout submenus with jQuery's show/hide logic

Time for action – animations with show/hide

What just happened?

Pop quiz – using show and hide

Animated toggling

Time for action – replacing show and hide with toggle

Have a go hero – doing more with toggle

Summary

3. Managing Animations

Working with the queue

Viewing the queue

Time for action - viewing the queue

What just happened?

Pop quiz – viewing the queue

Adding a function to the queue

Time for action – adding a single function to the queue

What just happened?

Pop quiz – adding new items to the array

Using a callback function to keep the queue moving

Time for action – keeping the queue running

What just happened?

Pop quiz – keeping the queue running

Replacing the queue

Time for action – replacing the queue

What just happened?

Pop quiz – replacing the queue

Ensuring custom queues iterate correctly

Time for action – dequeueing functions

What just happened?

Stopping an animation

Time for action – preventing animation build-up using the stop method

What just happened?

Pop quiz – stopping an animation

Delaying queue execution

Clearing the queue

Useful properties of the jQuery object

Globally disabling animations

Changing the default frame rate

Summary

4. Sliding Animations

Sliding elements into view

Time for action – creating a slide-down login form

What just happened?

Pop quiz – sliding elements down

Have a go hero – sliding elements down

Sliding elements out of view

Time for action – sliding elements up

What just happened?

Pop quiz – sliding elements up

Have a go hero – fixing the Cancel link

Toggling the slide

Time for action – using slideToggle

What just happened?

Have a go hero – doing more with slideToggle

Pop quiz – using slideToggle

Easing

Time for action – adding easing

What just happened?

Using an object literal to add easing

Time for action – using the alternative argument format

What just happened?

Have a go hero – using easing

Pop quiz – using easing

The flicker effect

Time for action – avoiding the flicker effect

What just happened?

Time for action – fixing the flicker

What just happened?

Pop quiz – fixing the flicker

Have a go hero – adding a delay before showing a submenu

Summary

5. Custom Animations

The animate method

Per-property easing

An alternative syntax for animate()

Animating an element's position

Time for action – creating an animated content viewer

What just happened?

Time for action – initializing variables and prepping the widget

What just happened?

Time for action – defining a post-animation callback

What just happened?

Time for action – adding event handlers for the UI elements

What just happened?

Skinning the widget

Time for action – adding a new skin

What just happened?

Pop quiz – creating an animated content-viewer

Have a go hero – making the image viewer more scalable

Animating an element's size

Time for action – creating the underlying page and basic styling

What just happened?

Time for action – defining the full and small sizes of the images

What just happened?

Time for action – creating the overlay images

What just happened?

Time for action – creating the overlay wrappers

What just happened?

Time for action – maintaining the overlay positions

What just happened?

Pop quiz – creating expanding images

Have a go hero – doing away with the hardcoded dims object

Creating a jQuery animation plugin

Time for action – creating a test page and adding some styling

What just happened?

Creating the plugin

Time for action – adding a license and defining configurable options

What just happened?

Time for action – adding our plugin method to the jQuery namespace

What just happened?

Time for action – creating the UI

What just happened?

Time for action – creating the transition overlay

What just happened?

Time for action – defining the transitions

What just happened?

Using the plugin

Pop quiz – creating a plugin

Have a go hero – extending the plugin

Summary

6. Extended Animations with jQuery UI

Obtaining and setting up jQuery UI

A new template file

The new effects added by jQuery UI

Using the effect API

The bounce effect

Configuration options

Time for action – using the bounce effect

What just happened?

The highlight effect

Configuration options

Time for action – highlighting elements

What just happened?

The pulsate effect

Configuration options

Time for action – making an element pulsate

What just happened?

The shake effect

Configuration options

Time for action – shaking an element

What just happened?

The size effect

Configuration options

Time for action – resizing elements

What just happened?

The transfer effect

Configuration options

Time for action – transferring the outline of one element to another

What just happened?

Pop quiz – using the effect API

Using effects with show and hide logic

The blind effect

Configuration options

Time for action – using the blind effect

What just happened?

The clip effect

Configuration options

Time for action – clipping an element in and out

What just happened?

The drop effect

Configuration options

Time for action – using the effect

What just happened?

The explode effect

Configuration options

Time for action – exploding an element

What just happened?

The fold effect

Configuration options

Time for action – folding an element away

What just happened?

The puff effect

Configuration options

Time for action – making an element disappear in a puff

What just happened?

The slide effect

Configuration options

Time for action – sliding elements in and out of view

What just happened?

The scale effect

Configuration options

Time for action – scaling an element

What just happened?

Pop quiz – using show/hide logic

Have a go hero – experimenting with the effect API

Easing functions

Time for action – adding easing to effects

What just happened?

Color animations

Time for action – animating between colors

What just happened?

Class transitions

Time for action – transitioning between classes

What just happened?

Pop quiz – easing, color, and class animations

Summary

7. Full Page Animations

Animated page scroll

Time for action – creating the page that will scroll and its styling

What just happened?

Time for action – animating the scroll

What just happened?

Pop quiz – animating page scroll

Have a go hero – extending animated page scroll

The illusion of depth with parallax

A little help from the new cssHooks functionality

Time for action – creating the stage and adding the styling

What just happened?

Time for action – animating the background position

What just happened?

Pop quiz – implementing the parallax effect

Have a go hero – extending parallax

Animated single-page navigation

Time fr action – creating individual pages and adding the styles

What just happened?

Time for action – adding the scroll navigation

What just happened?

Pop quiz – creating a single-page website

Have a go hero – extending single-page navigation

Stop-motion animation

Imagery

Technique

Time for action – adding the markup and styling

What just happened?

Time for action – creating the frames and running the animation

What just happened?

Pop quiz – implementing stop-motion animation with jQuery

Have a go hero – extending stop-motion animation

Summary

8. Other Popular Animations

Proximity animations

Time for action – creating and styling the page

What just happened?

Time for action – prepping the page for sliding functionality

What just happened?

Time for action – animating the scroller

What just happened?

Time for action – adding the mouse events

What just happened?

Time for action – adding keyboard events

What just happened?

Have a go hero – extending proximity animations

Pop quiz – implementing proximity animations

Animated page headers

Time for action – creating an animated header

What just happened?

Have a go hero – extending the animated header

Marquee text

Time for action – creating and styling the underlying page

What just happened?

Time for action – retrieving and processing the post list

What just happened?

Time for action – animating the post links

What just happened?

Have a go hero – extending the marquee scroller

Pop Quiz – creating a marquee scroller

Summary

9. CSS3 Animations

CSS3 2D transforms

Understanding the matrix

Translate

Scale

Skew

Rotation

Working with transforms

jQuery and transforms

Internet Explorer transforms

CSS3 3D transforms

Animated rotation with jQuery and CSS3

Time for action – animating an element's rotation

What just happened?

Problems with IE

Pop quiz – implementing CSS3 rotation

Have a go hero – extending CSS3 rotation

Animated skewing

Time for action – creating the underlying markup and basic styling

What just happened?

Time for action – initializing the widget

What just happened?

Time for action – animating an element's skew

What just happened?

Time for action – skewing an element from left to right

What just happened?

Time for action – wiring up the controls

What just happened?

Pop quiz – using the matrix

Have a go hero – extending matrix animation

Summary

10. Canvas Animations

The canvas API

The canvas element

Context methods

Native shapes

Paths

Images and patterns

Text

Transformation methods

Pixel manipulation

Drawing to the canvas

Time for action – drawing to the canvas

What just happened?

Pop quiz – drawing to the canvas

Have a go hero – creating the flag of your nation

Canvas, IE, and the alternatives

API methods that simply do not work

Time for action – making our code compatible with IE

What just happened?

Pop Quiz – supporting IE

Have a go hero – extending IE support

Animating the canvas

Time for action – creating an animation on the canvas

What just happened?

Time for action – animating the white crosses

What just happened?

Time for action – animating the red crosses

What just happened?

Pop quiz – animating the canvas

Have a go hero – creating canvas animations

Creating a canvas game

Time for action – creating the initial page

What just happened?

Time for action – the initial script

What just happened?

Time for action – adding the aliens to the page

What just happened?

Time for action – moving the aliens

What just happened?

Time for action – adding handlers to control the ship

What just happened?

Pop quiz – creating canvas-based games

Have a go hero – extending the space invaders clone

Summary

A. Pop Quiz Answers

Chapter 1

Basic animation with jQuery

Chapter 2

Using fadeIn

Using fadeOut

Using fadeToggle()

Using fadeTo

Using show and hide

Chapter 3

Viewing the queue

Adding new items to the array

Keeping the queue running

Replacing the queue

Stopping an animation

Chapter 4

Sliding elements down

Sliding elements up

Using slideToggle

Using easing

Fixing the flicker

Chapter 5

Creating an animated content-viewer

Creating expanding images

Creating a plugin

Chapter 6

Using the effect API

Using show/hide logic

Easing, color, and class animations

Chapter 7

Animating page scroll

Implementing the parallax effect

Creating a single-page website

Implementing stop-motion animation with jQuery

Chapter 8

Implementing proximity animations

Creating a marquee scroller

Chapter 9

Implementing CSS3 rotation

Using the matrix

Chapter 10

Drawing to the canvas

Supporting IE

Animating the canvas

Creating canvas-based games

Index

jQuery 1.4 Animation TechniquesBeginner's Guide

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 transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information 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 information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: March 2011

Production 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 ( <Filosarti@tiscali.it> )

Credits

Author

Dan Wellman

Reviewers

Shaiful Islam

Ben Nadel

Cyril Pierron

Acquisition 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