jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
Time for action – animating the post links [ 227 ] Chapter 8 We're now ready to begin scrolling the post links within the marquee. We can do this using our custom event. 1. After the getJSON() method, add the following code to the page: $("body").delegate("#marquee", "marquee-ready", function() { var marquee = $(this), postLink = marquee.find("a").eq(0); width = postLink.width() + parseInt(postLink.css("marginRight")), time = 15 * width; postLink.animate({ marginLeft: "-=" + width }, time, "linear", function() { $(this).css({ marginLeft: 0 }).appendTo(marquee.find("div").eq(0)); marquee.trigger("marquee-ready"); }); }); 2. Our example is now complete. When we run the page at this point, the posts should begin scrolling from left to right. What just happened? We use the jQuery delegate() method to bind an event handler to our custom marquee-ready event. We need to use event delegation to achieve this because when this part of the code is executed, the JSON response is unlikely to have returned so the marquee element won't even exist. Attaching the event handler to the body of the page is an easy way to prepare the page for when the marquee element does exist. Within the anonymous event-handling function, we first cache a reference to the marquee element using the this object, which is scoped to our marquee element. We then select the first link in the marquee, and determine its total width including margin. We also work out what is effectively the speed of the animation. jQuery animations use a duration to determine how quickly an animation should run, but the problem this causes us is that posts with longer titles will move faster, because they have a greater distance to animate in the same amount of time.
Other Popular Animations To fix this, we work out a duration to pass to the animation method based on an arbitrary "speed" of 15 multiplied by the width of the current . This ensures that each post will scroll at the same speed regardless of how long it is. Once we have obtained the total width and duration, we can then run the animation on the first link in the marquee, using our width and time variables to configure the animation. We animate the post link by setting a negative margin of the first link, which drags all of the other links along with it. Once the animation is complete, we remove the margin-left from the link, re-append it to the end of the within the marquee element, and fire the marquee-ready event once more to repeat the process. This occurs repeatedly, creating the ongoing animation and bringing us to the end of this example. Have a go hero – extending the marquee scroller One feature that would certainly be beneficial to your users would be if the post titles stopped being animated when the mouse pointer hovered over them. The animation could then be restarted when the pointer moves off them again. Have a go at adding this functionality yourself. It shouldn't be too tricky at all and should involve adding mouseenter and mouseleave event handlers. You'll need to work out how much of any given link is already outside of the visible area of the marquee in order to ensure the animation restarts at the same speed that it stopped at, but this should be quite similar to how we worked out the duration in this version of the example. See how you get on. Pop Quiz – creating a marquee scroller 1. Why did we create a dynamic-duration variable (time) instead of using one of jQuery's predefined durations? a. Because its quicker using an integer, even if that integer has to be calculated, than using one of the duration strings b. Because it's more fun c. To make sure the links are appended to the correct element after being animated d. To ensure that the links all animate at the same speed regardless of how long they are [ 228 ]
- Page 197 and 198: Extended Animations with jQuery UI
- Page 199 and 200: Extended Animations with jQuery UI
- 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: [ 219 ] Chapter 8 What just happene
- 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 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
Other Popular <strong>Animation</strong>s<br />
To fix this, we work out a duration to pass to the animation method based on an arbitrary<br />
"speed" <strong>of</strong> 15 multiplied by the width <strong>of</strong> the current . This ensures that each post will<br />
scroll at the same speed regardless <strong>of</strong> how long it is.<br />
Once we have obtained the total width and duration, we can then run the animation<br />
on the first link in the marquee, using our width and time variables to configure the<br />
animation. We animate the post link by setting a negative margin <strong>of</strong> the first link, which<br />
drags all <strong>of</strong> the other links along with it.<br />
Once the animation is complete, we remove the margin-left from the link, re-append it<br />
to the end <strong>of</strong> the within the marquee element, and fire the marquee-ready event<br />
once more to repeat the process. This occurs repeatedly, creating the ongoing animation and<br />
bringing us to the end <strong>of</strong> this example.<br />
Have a go hero – extending the marquee scroller<br />
One feature that would certainly be beneficial to your users would be if the post titles<br />
stopped being animated when the mouse pointer hovered over them. The animation<br />
could then be restarted when the pointer moves <strong>of</strong>f them again. Have a go at adding this<br />
functionality yourself. It shouldn't be too tricky at all and should involve adding mouseenter<br />
and mouseleave event handlers.<br />
You'll need to work out how much <strong>of</strong> any given link is already outside <strong>of</strong> the visible area <strong>of</strong><br />
the marquee in order to ensure the animation restarts at the same speed that it stopped<br />
at, but this should be quite similar to how we worked out the duration in this version <strong>of</strong> the<br />
example. See how you get on.<br />
Pop Quiz – creating a marquee scroller<br />
1. Why did we create a dynamic-duration variable (time) instead <strong>of</strong> using one <strong>of</strong><br />
<strong>jQuery</strong>'s predefined durations?<br />
a. Because its quicker using an integer, even if that integer has to be calculated,<br />
than using one <strong>of</strong> the duration strings<br />
b. Because it's more fun<br />
c. To make sure the links are appended to the correct element after being<br />
animated<br />
d. To ensure that the links all animate at the same speed regardless <strong>of</strong> how long<br />
they are<br />
[ 228 ]
Change language