jQuery 1.4 Animation Techniques - Index of

More documents

Recommendations

Info

measureText() method 270 messageList variable 41 methods, paths arc(a, b, c, d, e, f) 268 arcTo(a, b, c, d, e) 268 beginPath() 268 bezierCurveTo(a, b, c, d, e, f) 268 closePath() 268 fill() 269 lineTo(a, b) 269 moveTo(a, b) 269 quadraticCurveTo(a, b, c, d) 269 stroke() 269 methods, pixel manipulation createImageData() 271 getImageData() 271 putImageData() 271 middle variable 212 miterLimit property 269 mouseeenter event handler 215 mouseenter event 151 mouse events adding, to proximity animations 214 mouseleave handler function 98 mousenter event handling function 98 moveTo() method 269 N native shapes, canvas element 267 newScroll variable 184 noConflict() method 125 normalizedDuration variable 214 not() method 109 O <strong>of</strong>fset() method 116, 184 onload handler 281 overlay images creating, in widget 116 overlay positions, widget maintaining 119 overlay wrappers creating, in widget 116-118 P [ 317 ] page scroll animating 179-184 parallax effect about 186 background position, animating 188, 189 cssHooks feature, using 186 extending 190 implementing 189 stage, creating 187, 188 stage, styling 187, 188 parseInt() function 257 partial opacity animating 37 behavior, adding 39-41 example page, creating 38-43 pop() function 56 posLeftMarker variable 130 post-animation callback defining 107, 108 postAnim function postAnim() function 108, 110 preFlat object 257 preventDefault() function 78, 262 preventDefault() method 109, 128, 184 properties globalAlpha 267 globalCompositeOperation 267 properties, createImageData() method data 272 height 272 length 272 width 272 properties, paths lineCap 269 lineJoin 269 lineWidth 269 miterLimit 269 properties, text font 271 textAlign 271 textBaseline 271
proximity animations about 207 extending 216 keyboard events, adding 215, 216 mouse events, adding to 214 page, creating and styling 208, 209 page, prepping for sliding functionality 210-213 scroller, animating 213, 214 puff effect about 166 configuration options 166 element, making disappear in puff 166, 167 using 166, 167 pulsate effect about 145 configuration options 145 element, pulsating 145, 146 using 145, 146 purecss class 26 push() function 56 putImageData() method 271 Q quadraticCurveTo() method 269 queue callback function, using 62, 63 clearing 69 function, adding 61 replacing 63 single function, adding 61 viewing 57,-60 working with 56 queue execution delaying 69 queue() method 55, 57 R rectInt variable 286 rectMotion() function 283, 289 removeClass(), class transition methods 176 removeClass() method 177 removeFrame() function 204 resetOffset variable 214 reverse() function 56 rotate function 232 [ 318 ] rotate() method 271 rotateStrings array 245 S Scalable Vector Graphics (SVG) 277 scale effect about 170 configuration options 170 element, scaling 170, 172 using 170, 172 scale function 232, 234 scale() method 271 scaleX function 232 scaleY function 232 screensize object 196 scroller variable 212 scrollHeight property 184 scroll navigation adding, to single-page navigation 193-195 scrollTo() method 197 scrollTo plugin 185, 197 scrollTop() method 179, 184 setInterval() function 204, 246, 289 setInterval() method 219 setTimeout() function 98 shadowBlur property 268 shadowColor property 268 shadowOffsetX property 268 shadowOffsetY property 268 shake effect about 147 configuration options 147 element, shaking 147, 148 using 147, 148 show() or hide() method 155 triggering 46, 47 simple CSS hover states enhancing, fadeIn() animations used 22, 23 single-page navigation animating 190 extending 200 individual pages, creating 190-193 scroll navigation, adding 193-195 styles, adding to pages 190-193 single-page website creating 196-199
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 and 16:
Download from Wow! eBook Table of
Page 17 and 18:
Table of Contents Time for action -
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
Page 66 and 67:
} var el = $(this); if (el.css("fil
Page 68 and 69:
[ 47 ] Chapter 2 Usually these meth
Page 70 and 71:
Time for action - animations with s
Page 72 and 73:
Download from Wow! eBook [ 51 ] Ch
Page 74 and 75:
2. Save the changes as toggle.html.
Page 76 and 77:
3 Managing Animations Like most of
Page 78 and 79:
[ 57 ] Chapter 3 A custom queue tha
Page 80 and 81:
If we wish to see how many function
Page 82 and 83:
2. What does the queue() method ret
Page 84 and 85:
[ 63 ] Chapter 3 The argument we su
Page 86 and 87:
[ 65 ] Chapter 3 We pass a callback
Page 88 and 89:
[ 67 ] Chapter 3 The first argument
Page 90 and 91:
Delaying queue execution [ 69 ] Cha
Page 92 and 93:
[ 71 ] Chapter 3 Also note that the
Page 94 and 95:
4 Sliding Animations Another type o
Page 96 and 97:
Time for action - creating a slide-
Page 98 and 99:
[ 77 ] Chapter 4 header form input
Page 100 and 101:
Pop quiz - sliding elements down 1.
Page 102 and 103:
Download from Wow! eBook }); }); $
Page 104 and 105:
Toggling the slide [ 83 ] Chapter 4
Page 106 and 107:
[ 85 ] Chapter 4 } h2 { margin:0; p
Page 108 and 109:
[ 87 ] Chapter 4 The previous scree
Page 110 and 111:
Pop quiz - using slideToggle 1. Wha
Page 112 and 113:
[ 91 ] Chapter 4 Easing is a great
Page 114 and 115:
[ 93 ] Chapter 4 Home Articles J
Page 116 and 117:
[ 95 ] Chapter 4 3. Save this file
Page 118 and 119:
In the previous screenshot, we see
Page 120 and 121:
Pop quiz - fixing the flicker 1. Wh
Page 122 and 123:
5 Custom Animations The predefined
Page 124 and 125:
An alternative syntax for animate()
Page 126 and 127:
[ 105 ] Chapter 5 width:295px; marg
Page 128 and 129:
[ 107 ] Chapter 5 What just happene
Page 130 and 131:
[ 109 ] Chapter 5 Although not esse
Page 132 and 133:
[ 111 ] Chapter 5 The previous scre
Page 134 and 135:
[ 113 ] Chapter 5 The styles we use
Page 136 and 137:
Page 138 and 139:
}, html: copy, width: expander.widt
Page 140 and 141:
[ 119 ] Chapter 5 If the image alre
Page 142 and 143:
[ 121 ] Chapter 5 d. Two objects wh
Page 144 and 145:
[ 123 ] Chapter 5 text-align:center
Page 146 and 147:
Page 148 and 149:
[ 127 ] Chapter 5 Finally, we retur
Page 150 and 151:
[ 129 ] Chapter 5 Once we've define
Page 152 and 153:
} }; $(config.selector).find("a").c
Page 154 and 155:
[ 133 ] Chapter 5 In the previous s
Page 156:
Have a go hero - extending the plug
Page 159 and 160:
Extended Animations with jQuery UI
Page 161 and 162:
Page 163 and 164:
Page 165 and 166:
Page 167 and 168:
Page 169 and 170:
Page 171 and 172:
Download from Wow! eBook Extended
Page 173 and 174:
Page 175 and 176:
Page 177 and 178:
Page 179 and 180:
Page 181 and 182:
Page 183 and 184:
Page 185 and 186:
Page 187 and 188:
Page 189 and 190:
Page 191 and 192:
Page 193 and 194:
Page 195 and 196:
Page 197 and 198:
Page 199 and 200:
Page 201 and 202:
Full Page Animations Can we animate
Page 203 and 204:
Full Page Animations display:block;
Page 205 and 206:
Download from Wow! eBook Full Page
Page 207 and 208:
Full Page Animations Have a go hero
Page 209 and 210:
Full Page Animations 4. Save this f
Page 211 and 212:
Full Page Animations 2. The bgpos c
Page 213 and 214:
Full Page Animations nav ul { margi
Page 215 and 216:
Full Page Animations screensize = {
Page 217 and 218:
Full Page Animations What just happ
Page 219 and 220:
Full Page Animations The second sec
Page 221 and 222:
Full Page Animations Pop quiz - cre
Page 223 and 224:
Full Page Animations Time for actio
Page 225 and 226:
Full Page Animations Next we define
Page 228 and 229:
8 Other Popular Animations This cha
Page 230 and 231:
[ 209 ] Chapter 8 } .slider #scroll
Page 232 and 233:
}), pointerText = "Use your pointer
Page 234 and 235:
[ 213 ] Chapter 8 In the previous s
Page 236 and 237:
prox.mousemove(function(ev) { goAni
Page 238 and 239:
Pop quiz - implementing proximity a
Page 240 and 241:
Page 242 and 243:
2. Save the new page as marquee.htm
Page 244 and 245:
[ 223 ] Chapter 8 1. jQuery provide
Page 246 and 247:
clear:both; } div#fadeLeft, div#fad
Page 248 and 249:
Time for action - animating the pos
Page 250:
2. In this example we used the dele
Page 253 and 254:
CSS3 Animations The following trans
Page 255 and 256:
CSS3 Animations Units It is of crit
Page 257 and 258:
CSS3 Animations Skew Remember the t
Page 259 and 260:
CSS3 Animations Calculating the sin
Page 261 and 262:
CSS3 Animations The filter property
Page 263 and 264:
CSS3 Animations If, like me, you th
Page 265 and 266:
CSS3 Animations } el.filters.item("
Page 267 and 268:
CSS3 Animations An unfortunate prob
Page 269 and 270:
CSS3 Animations The context of this
Page 271 and 272:
CSS3 Animations Time for action - i
Page 273 and 274:
CSS3 Animations The first variable
Page 275 and 276:
CSS3 Animations Time for action - a
Page 277 and 278:
Download from Wow! eBook CSS3 Anim
Page 279 and 280:
CSS3 Animations We also have to upd
Page 281 and 282:
CSS3 Animations flatMatrix[3] = fla
Page 283 and 284:
CSS3 Animations When updating the s
Page 285 and 286:
CSS3 Animations translate translate
Page 287 and 288: Canvas Animations Subjects that we'
Page 289 and 290: Canvas Animations We can set the co
Page 291 and 292: Download from Wow! eBook Canvas An
Page 293 and 294: Canvas Animations All imageData obj
Page 295 and 296: Canvas Animations context.beginPath
Page 297 and 298: Canvas Animations For the next part
Page 299 and 300: Canvas Animations Time for action -
Page 301 and 302: Canvas Animations 3. Save the new p
Page 305 and 306: Canvas Animations Once the rectangl
Page 307 and 308: Canvas Animations We then define tw
Page 309 and 310: Canvas Animations }, context.lineTo
Page 311 and 312: Canvas Animations Creating a canvas
Page 315 and 316: Canvas Animations What just happene
Page 317 and 318: Canvas Animations What just happene
Page 319 and 320: Canvas Animations aliens.splice(x,
Page 321 and 322: Canvas Animations Pop quiz - creati
Page 323 and 324: Download from Wow! eBook
Page 325 and 326: Pop Quiz Answers Using fadeToggle()
Page 327 and 328: Pop Quiz Answers Using slideToggle
Page 329 and 330: Pop Quiz Answers Implementing the p
Page 331 and 332: Pop Quiz Answers Animating the canv
Page 333 and 334: show() or hide() method, triggering
Page 335 and 336: cssHooks using 239 cssHooks feature
Page 337: fading animations 20 flicker effect
Page 341 and 342: scaleY 232 skew 232 skewX 232 skewY
Page 343 and 344: jQuery 1.4 Reference Guide ISBN: 97
show all

jQuery 1.4 Animation Techniques - Index of

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?