jQuery 1.4 Animation TechniquesBeginner'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.