jQuery 2.0 Animation Techniques Beginner's Guide -- Table of Contents -- jQuery 2.0 Animation Techniques Beginner's Guide -- Credits -- About the Authors -- 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. Getting Started -- Animation on the Web -- The power of animated UIs -- When to use animations -- When not to use animations -- Animation checklist -- Animating with jQuery -- Creating the project folder -- The template file -- A basic animation example -- Time for action - creating an animated loader -- What just happened? -- Have a go hero - extending the loading animation -- Pop quiz - basic animation with jQuery -- Summary -- 2. Image Animation -- Image animation -- Fading animations -- Configuring the animations with arguments -- Time for action - setting up the markup and styling -- What just happened? -- Pop quiz - using fadeIn() -- Scripting the image slider -- Time for action - scripting the image rotator -- What just happened? -- Pop quiz - length() and milliseconds -- Time for action - extending the pause-on-hover functionality -- What just happened? -- Time for action - extending the previous and next link features -- What just happened? -- Pop quiz - preventDefault() and setInterval() -- Time for action - extending the pagination functionality -- What just happened? -- Have a Go Hero - extending the image rotator further -- Pop quiz - altering variables and zero index -- Summary -- 3. Background Animation.

Background-color animation -- Introducing the animate method -- Time for action - animating the body background-color -- What just happened? -- Chaining together jQuery methods -- Have a go hero - extending our script with a loop -- Pop quiz - chaining with the animate() method -- The illusion of depth with parallax -- Time for action - creating the stage and adding the styling -- What just happened? -- Time for action - animating the background position -- What just happened? -- Have a go hero - extending parallax -- Automatic background animation -- Time for action - creating an automatic background animation -- What just happened? -- Have a go hero - playing under the hood -- Let's make it diagonal! -- Time for action - animating the background diagonally -- What just happened? -- Have a go hero -- Parallax background on page elements -- Time for action - setting up the markup and styling -- What just happened? -- Time for action - scripting our parallax script -- What just happened? -- Have a go hero - customizing the speed and direction of the effect -- Pop quiz - the scroll() and scrollTop() methods -- Summary -- 4. Navigation Animation -- Creating simple navigation animations -- Configuring addClass() and removeClass() -- Time for action - setting up our navigation -- What just happened? -- Have a go hero - extending our hover style -- Using the stop() method -- Time for action - adding the stop() method -- What just happened? -- Animating the window with scrollTop() -- Time for action - scripting our smooth scrolling animation -- What just happened? -- Smooth scrolling and page background color -- Time for action - creating the super animation -- What just happened? -- Have a go hero - extending the script further -- Pop quiz - the ^ symbol and the stop() method -- Summary -- 5. Form and Input Animation -- Using simple form animations.

Time for action - creating the form -- What just happened? -- Time for action - adding our animation styles to the form -- What just happened? -- Form validation animations -- Time for action - basic dialog form validation -- What just happened? -- Have a go hero - extending our form validation -- Time for action - animating form validation errors -- What just happened? -- Have a go hero - putting it all together -- Pop quiz - form animation and jQuery UI -- Summary -- 6. Extended Animations with jQuery UI -- Obtaining and setting up jQuery UI -- Creating a new template file -- The new effects added by jQuery UI -- Using the effect API -- The bounce effect -- Syntax -- Configuration options -- Time for action - using the bounce effect -- What just happened? -- The highlight effect -- Syntax -- Configuration options -- Time for action - highlighting elements -- What just happened? -- The pulsate effect -- Syntax -- Configuration options -- Time for action - making an element pulsate -- What just happened? -- The shake effect -- Syntax -- Configuration options -- Time for action - shaking an element -- What just happened? -- The size effect -- Syntax -- Configuration options -- Time for action - resizing elements -- What just happened? -- The transfer effect -- Syntax -- 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 the show and hide logic -- The blind effect -- Syntax -- Configuration options -- Time for action - using the blind effect -- What just happened? -- The clip effect -- Syntax -- Configuration options -- Time for action - clipping an element in and out -- What just happened? -- The drop effect -- Syntax -- Configuration options -- Time for action - using the effect -- What just happened? -- The explode effect.

Syntax -- Configuration options -- Time for action - exploding an element -- What just happened? -- The fold effect -- Syntax -- Configuration options -- Time for action - folding an element away -- What just happened? -- The puff effect -- Syntax -- Configuration options -- Time for action - making an element disappear in a puff -- What just happened? -- The slide effect -- Syntax -- Configuration options -- Time for action - sliding elements in and out of view -- What just happened? -- The scale effect -- Syntax -- 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? -- Using an object literal to add easing -- Have a go hero - using easing -- Pop quiz - using easing -- Animating between different colors -- 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. 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 -- 8. Other Popular Animations -- Understanding Proximity animations -- Time for action - creating and styling the page -- What just happened? -- Time for action - preparing 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 -- Animating page headers -- Time for action - creating an animated header -- What just happened? -- Have a go hero - extending the animated header -- Animating text using the marquee effect.

Time for action - creating and styling the underlying page.