jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
[ iii ] Table of Contents The flicker effect 92 Time for action – avoiding the flicker effect 92 Time for action – fixing the flicker 97 Summary 99 Chapter 5: Custom Animations 101 The animate method 102 Per-property easing 102 An alternative syntax for animate() 103 Animating an element's position 103 Time for action – creating an animated content viewer 104 Time for action – initializing variables and prepping the widget 106 Time for action – defining a post-animation callback 107 Time for action – adding event handlers for the UI elements 109 Skinning the widget 111 Time for action – adding a new skin 111 Time for action – creating the underlying page and basic styling 114 Time for action – defining the full and small sizes of the images 115 Time for action – creating the overlay images 116 Time for action – creating the overlay wrappers 116 Time for action – maintaining the overlay positions 119 Creating a jQuery animation plugin 121 Time for action – creating a test page and adding some styling 122 Creating the plugin 124 Time for action – adding a license and defining configurable options 124 Time for action – adding our plugin method to the jQuery namespace 125 Time for action – creating the UI 127 Time for action – creating the transition overlay 129 Time for action – defining the transitions 130 Using the plugin 132 Summary 135 Chapter 6: Extended Animations with jQuery UI 137 Obtaining and setting up jQuery UI 138 A new template file 139 The new effects added by jQuery UI 139 Using the effect API 140 The bounce effect 141 Configuration options 141 Time for action – using the bounce effect 141 The highlight effect 143 Configuration options 143
Table of Contents Time for action – highlighting elements 143 The pulsate effect 145 Configuration options 145 Time for action – making an element pulsate 145 The shake effect 147 Configuration options 147 Time for action – shaking an element 147 The size effect 149 Configuration options 149 Time for action – resizing elements 150 The transfer effect 152 Configuration options 152 Time for action – transferring the outline of one element to another 152 Using effects with show and hide logic 155 The blind effect 155 Configuration options 156 Time for action – using the blind effect 156 The clip effect 157 Configuration options 157 Time for action – clipping an element in and out 158 The drop effect 159 Configuration options 160 Time for action – using the effect 160 The explode effect 162 Configuration options 162 Time for action – exploding an element 163 The fold effect 164 Configuration options 164 Time for action – folding an element away 164 The puff effect 166 Configuration options 166 Time for action – making an element disappear in a puff 166 The slide effect 168 Configuration options 168 Time for action – sliding elements in and out of view 168 The scale effect 170 Configuration options 170 Time for action – scaling an element 170 Easing functions 173 Time for action – adding easing to effects 174 Color animations 174 Time for action – animating between colors 174 Class transitions 176 [ iv ]
- Page 2 and 3: Download from Wow! eBook jQuery 1.
- Page 4 and 5: Author Dan Wellman Reviewers Shaifu
- Page 6 and 7: About the Author Dan Wellman is an
- Page 8 and 9: Cyril Pierron is an engineer, a web
- Page 12: For Pat Spacagna, the greatest moth
- Page 15: Download from Wow! eBook Table of
- Page 19 and 20: Table of Contents jQuery and transf
- Page 21 and 22: Drawing to the canvas 309 Supportin
- Page 23 and 24: Preface What this book covers Chapt
- Page 25 and 26: Preface Have a go hero - heading Th
- Page 27 and 28: Preface Piracy Piracy of copyright
- Page 29 and 30: Introduction In addition to animate
- Page 31 and 32: Introduction When not to use animat
- Page 33 and 34: Introduction of the template file"
- Page 35 and 36: Introduction In the previous screen
- Page 37 and 38: Introduction Once our variables hav
- Page 40 and 41: 2 Fading Animations In this chapter
- Page 42 and 43: [ 21 ] Chapter 2 We can control the
- Page 44 and 45: The previous screenshot shows how t
- Page 46 and 47: [ 25 ] Chapter 2 Most of the styles
- Page 48 and 49: 2. What else can be passed into the
- Page 50 and 51: Time for action - creating the dial
- Page 52 and 53: [ 31 ] Chapter 2 For example, the a
- Page 54 and 55: Download from Wow! eBook The follo
- Page 56 and 57: [ 35 ] Chapter 2 The CSS is used mo
- Page 58 and 59: The fadeTo() method is used in the
- Page 60 and 61: [ 39 ] Chapter 2 #messageList table
- Page 62 and 63: [ 41 ] Chapter 2 What just happened
- Page 64 and 65: 2. What format can these arguments
Table <strong>of</strong> Contents<br />
Time for action – highlighting elements 143<br />
The pulsate effect 145<br />
Configuration options 145<br />
Time for action – making an element pulsate 145<br />
The shake effect 147<br />
Configuration options 147<br />
Time for action – shaking an element 147<br />
The size effect 149<br />
Configuration options 149<br />
Time for action – resizing elements 150<br />
The transfer effect 152<br />
Configuration options 152<br />
Time for action – transferring the outline <strong>of</strong> one element to another 152<br />
Using effects with show and hide logic 155<br />
The blind effect 155<br />
Configuration options 156<br />
Time for action – using the blind effect 156<br />
The clip effect 157<br />
Configuration options 157<br />
Time for action – clipping an element in and out 158<br />
The drop effect 159<br />
Configuration options 160<br />
Time for action – using the effect 160<br />
The explode effect 162<br />
Configuration options 162<br />
Time for action – exploding an element 163<br />
The fold effect 164<br />
Configuration options 164<br />
Time for action – folding an element away 164<br />
The puff effect 166<br />
Configuration options 166<br />
Time for action – making an element disappear in a puff 166<br />
The slide effect 168<br />
Configuration options 168<br />
Time for action – sliding elements in and out <strong>of</strong> view 168<br />
The scale effect 170<br />
Configuration options 170<br />
Time for action – scaling an element 170<br />
Easing functions 173<br />
Time for action – adding easing to effects 174<br />
Color animations 174<br />
Time for action – animating between colors 174<br />
Class transitions 176<br />
[ iv ]
Change language