Free Sample
+ Collection

jQuery 1.4 Animation Techniques: Beginners Guide

Beginner's Guide
Dan Wellman

This book and eBook will enable you to quickly master all of jQuery’s animation methods and build a toolkit of ready-to-use animations using jQuery 1.4.
$23.99
$39.99
RRP $23.99
RRP $39.99
eBook
Print + eBook

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781849513302
Paperback344 pages

About This Book

  • Create both simple and complex animations using clear, step-by-step instructions, accompanied with screenshots
  • Walk through jQuery’s built-in animation methods and see in detail how each one can be used
  • Over 50 detailed examples of different types of web page animations
  • Attractive pictures and screenshots that show animations in progress and how the examples should finally appear
  • Contains examples featuring many new HTML5 elements and CSS3 styling
  • Follow the examples in a step-by-step approach beginning with simple concepts and building up to more advanced implementations

Who This Book Is For

This book is written for web designers and front-end 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 applications with jQuery, then this book is for you.

Table of Contents

Chapter 1: Introduction
Animation on the Web
The power of animated UIs
Animating with jQuery
The template file
A basic animation example
Time for action – creating an animated loader
Summary
Chapter 2: Fading Animations
Fading animations
Time for action – adding the underlying markup and styling
Time for action – scripting the animation
Fading elements out
Time for action – creating the dialog
Fading PNGs in IE
Using fadeToggle() for convenient state-checking logic
Time for action – showing and hiding with fadeToggle()
Greater opacity control with fadeTo()
Time for action – creating the example page
Time for action – adding the behavior
Time for action – fading table-rows in IE
Showing and hiding
Time for action – animations with show/hide
Time for action – replacing show and hide with toggle
Summary
Chapter 3: Managing Animations
Working with the queue
Time for action - viewing the queue
Time for action – adding a single function to the queue
Time for action – keeping the queue running
Time for action – replacing the queue
Ensuring custom queues iterate correctly
Time for action – dequeueing functions
Stopping an animation
Time for action – preventing animation build-up using the stop method
Delaying queue execution
Clearing the queue
Useful properties of the jQuery object
Summary
Chapter 4: Sliding Animations
Sliding elements into view
Time for action – creating a slide-down login form
Sliding elements out of view
Time for action – sliding elements up
Toggling the slide
Time for action – using slideToggle
Easing
Time for action – adding easing
Time for action – using the alternative argument format
The flicker effect
Time for action – avoiding the flicker effect
Time for action – fixing the flicker
Summary
Chapter 5: Custom Animations
The animate method
Animating an element's position
Time for action – creating an animated content viewer
Time for action – initializing variables and prepping the widget
Time for action – defining a post-animation callback
Time for action – adding event handlers for the UI elements
Skinning the widget
Time for action – adding a new skin
Time for action – creating the underlying page and basic styling
Time for action – defining the full and small sizes of the images
Time for action – creating the overlay images
Time for action – creating the overlay wrappers
Time for action – maintaining the overlay positions
Creating a jQuery animation plugin
Time for action – creating a test page and adding some styling
Creating the plugin
Time for action – adding a license and defining configurable options
Time for action – adding our plugin method to the jQuery namespace
Time for action – creating the UI
Time for action – creating the transition overlay
Time for action – defining the transitions
Using the plugin
Summary
Chapter 6: Extended Animations with jQuery UI
Obtaining and setting up jQuery UI
The new effects added by jQuery UI
Time for action – using the bounce effect
Time for action – highlighting elements
Time for action – making an element pulsate
Time for action – shaking an element
Time for action – resizing elements
Time for action – transferring the outline of one element to another
Using effects with show and hide logic
Time for action – using the blind effect
Time for action – clipping an element in and out
Time for action – using the effect
Time for action – exploding an element
Time for action – folding an element away
Time for action – making an element disappear in a puff
Time for action – sliding elements in and out of view
Time for action – scaling an element
Easing functions
Time for action – adding easing to effects
Color animations
Time for action – animating between colors
Class transitions
Time for action – transitioning between classes
Summary
Chapter 7: Full Page Animations
Animated page scroll
Time for action – creating the page that will scroll and its styling
Time for action – animating the scroll
The illusion of depth with parallax
Time for action – creating the stage and adding the styling
Time for action – animating the background position
Animated single-page navigation
Time fr action – creating individual pages and adding the styles
Time for action – adding the scroll navigation
Stop-motion animation
Time for action – adding the markup and styling
Time for action – creating the frames and running the animation
Summary
Chapter 8: Other Popular Animations
Proximity animations
Time for action – creating and styling the page
Time for action – prepping the page for sliding functionality
Time for action – animating the scroller
Time for action – adding the mouse events
Time for action – adding keyboard events
Animated page headers
Time for action – creating an animated header
Marquee text
Time for action – creating and styling the underlying page
Time for action – retrieving and processing the post list
Time for action – animating the post links
Summary
Chapter 9: CSS3 Animations
CSS3 2D transforms
CSS3 3D transforms
Animated rotation with jQuery and CSS3
Time for action – animating an element's rotation
Animated skewing
Time for action – creating the underlying markup and basic styling
Time for action – initializing the widget
Time for action – animating an element's skew
Time for action – skewing an element from left to right
Time for action – wiring up the controls
Summary
Chapter 10: Canvas Animations
The canvas API
Drawing to the canvas
Time for action – drawing to the canvas
Canvas, IE, and the alternatives
Time for action – making our code compatible with IE
Animating the canvas
Time for action – creating an animation on the canvas
Time for action – animating the white crosses
Time for action – animating the red crosses
Creating a canvas game
Time for action – creating the initial page
Time for action – the initial script
Time for action – adding the aliens to the page
Time for action – moving the aliens
Time for action – adding handlers to control the ship
Summary

What You Will Learn

  • Implement subtle UI effects, user-triggered animations and full-page feature animations to animate the user interface of your web applications
  • Fade, hide, shrink, and slide your animations using jQuery’s built-in animation helper methods
  • Create custom animations using jQuery’s animate() method
  • Discover how the animation queue works and how it can be manipulated to create complex animations
  • Simulate animation in a variety of ways using other non-animation-specific jQuery methods
  • Discover how jQuery can be used to make the latest CSS3 and canvas animations work cross-browser
  • Obtain and set up jQuery UI— the official user interface library for jQuery
  • Define custom animations that can be complex and specialized
  • Extend the jQuery library with brand new functions and methods in the form of plugins
  • Get your images scrolled in a certain direction, and at a certain speed, depending on the movements of the mouse pointer
  • Create a continuous header animation manually with just a few lines of code

 

In Detail

Master animation in jQuery to produce slick and attractive interfaces that respond to your visitors' interactions

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML, and is the most popular JavaScript library in use today. Using the features offered by jQuery, developers are able to create dynamic web pages. This book will act as a resource for you to create animation and advanced special effects in your web applications, by following the easy-to-understand steps mentioned in it.

jQuery 1.4 Animation Techniques: Beginners Guide will allow you to master animation in jQuery to produce slick and attractive interfaces that respond to your visitors' interactions. You will learn everything you need to know about creating engaging and effective web page animations using jQuery. The book uses many examples and explains how to create animations using an easy, step-by-step, beginners guide approach.

This book will provide you with...

This book provides various examples that gradually build up the reader’s knowledge and practical experience in using the jQuery API to create stunning animations. The book starts off by explaining how animations make your user interface interactive and attractive. It explains the various methods used to make the element being animated appear or disappear. It provides a set of steps to create simple animations and show fading animations.

You can later learn how to make complex animations by chaining different effects together as well as how to halt a currently running application. You will find out how to slide your animation elements and learn to create custom animations that can be complex and specialized.

You will find out how to obtain and set up the jQuery UI— the official user interface library for jQuery. The book will tell you how to animate a page's background image, and will teach you how to make images scroll in a certain direction and at a certain speed depending on the movement of the mouse pointer

Authors

Read More