02.06.2013 Views

jQuery 1.4 Animation Techniques - Index of

jQuery 1.4 Animation Techniques - Index of

jQuery 1.4 Animation Techniques - Index of

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

[ iii ]<br />

Table <strong>of</strong> Contents<br />

The flicker effect 92<br />

Time for action – avoiding the flicker effect 92<br />

Time for action – fixing the flicker 97<br />

Summary 99<br />

Chapter 5: Custom <strong>Animation</strong>s 101<br />

The animate method 102<br />

Per-property easing 102<br />

An alternative syntax for animate() 103<br />

Animating an element's position 103<br />

Time for action – creating an animated content viewer 104<br />

Time for action – initializing variables and prepping the widget 106<br />

Time for action – defining a post-animation callback 107<br />

Time for action – adding event handlers for the UI elements 109<br />

Skinning the widget 111<br />

Time for action – adding a new skin 111<br />

Time for action – creating the underlying page and basic styling 114<br />

Time for action – defining the full and small sizes <strong>of</strong> the images 115<br />

Time for action – creating the overlay images 116<br />

Time for action – creating the overlay wrappers 116<br />

Time for action – maintaining the overlay positions 119<br />

Creating a <strong>jQuery</strong> animation plugin 121<br />

Time for action – creating a test page and adding some styling 122<br />

Creating the plugin 124<br />

Time for action – adding a license and defining configurable options 124<br />

Time for action – adding our plugin method to the <strong>jQuery</strong> namespace 125<br />

Time for action – creating the UI 127<br />

Time for action – creating the transition overlay 129<br />

Time for action – defining the transitions 130<br />

Using the plugin 132<br />

Summary 135<br />

Chapter 6: Extended <strong>Animation</strong>s with <strong>jQuery</strong> UI 137<br />

Obtaining and setting up <strong>jQuery</strong> UI 138<br />

A new template file 139<br />

The new effects added by <strong>jQuery</strong> UI 139<br />

Using the effect API 140<br />

The bounce effect 141<br />

Configuration options 141<br />

Time for action – using the bounce effect 141<br />

The highlight effect 143<br />

Configuration options 143

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!