jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
[ 31 ] Chapter 2 For example, the application may generate a large number of dialogs during any single session and if the user has to repeatedly wait half a second every time they close a dialog, they may perceive that the animation is wasting their time or otherwise acting as a barrier to their interaction. I believe it is best to pass control of whether the animation is used or not back to the visitor, and provide an option to disable the animation if the system is going to be generating them on a regular basis. This way, users will be able to remove the effect if they do feel that it is a barrier. Pop quiz – using fadeOut 1. What happens if the integer 0 is supplied as the value of the duration argument? a. The animation occurs instantly b. The animation runs at the default speed of 400 milliseconds c. Animations with jQuery are disabled globally d. A script error is thrown 2. How can we access the element that was animated within a supplied callback function? a. The callback function is passed a reference to the element that was animated b. By reselecting it from the DOM c. Using the jQuery property animatedElement d. Using the this keyword (optionally wrapped in jQuery functionality ($(this)) Have a go hero – doing more with fadeout A popular implementation that makes use of fade-out animations is a "growl" style messaging system where feedback is provided in the form of messages that pop up in the viewport before fading away; why not create your own growl style messaging system that utilizes the fadeOut() method. Fading PNGs in IE In the previous examples, we've looked at fading in and out using CSS background colors to illustrate the effect. We could easily extend it to include background images instead, which generally work just as well, if not better, with this effect.
Fading Animations One thing to watch out for when using background images in conjunction with fading animations however is that problems can be encountered with the display of the images when the animations are viewed in Microsoft's Internet Explorer. It is known as the black-border problem and causes a black aura to be displayed around the image when a PNG with alpha-transparency (semi-opacity) is used as the background image. It really only affects IE8 as there are work-arounds that can be used to fix the issue in both IE7 and IE6. Here's a screenshot of the problem: The previous screenshot shows a fadeout() animation in progress. The jagged black border around the logo is the issue we face in IE and is caused by Microsoft's proprietary filter properties, which jQuery uses to set the opacity (and produce the fade) in IE. There are several different fixes for this issue including: Fading the container of the element instead of the element directly Giving the container, or the element that is faded, a background color Whichever solution works best will depend on the situation at hand. An alternative solution, but which only fixes the issue in both IE6 and IE7, involves using the DD_BelatedPng.js library, to display alpha-transparent PNGs using VML. Unfortunately this doesn't work in IE8, so sometimes a combination of fixes may be required. [ 32 ]
- 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 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.
[ 31 ]<br />
Chapter 2<br />
For example, the application may generate a large number <strong>of</strong> dialogs during any single<br />
session and if the user has to repeatedly wait half a second every time they close a dialog,<br />
they may perceive that the animation is wasting their time or otherwise acting as a barrier<br />
to their interaction.<br />
I believe it is best to pass control <strong>of</strong> whether the animation is used or not back to the visitor,<br />
and provide an option to disable the animation if the system is going to be generating them<br />
on a regular basis. This way, users will be able to remove the effect if they do feel that it is<br />
a barrier.<br />
Pop quiz – using fadeOut<br />
1. What happens if the integer 0 is supplied as the value <strong>of</strong> the duration argument?<br />
a. The animation occurs instantly<br />
b. The animation runs at the default speed <strong>of</strong> 400 milliseconds<br />
c. <strong>Animation</strong>s with <strong>jQuery</strong> are disabled globally<br />
d. A script error is thrown<br />
2. How can we access the element that was animated within a supplied<br />
callback function?<br />
a. The callback function is passed a reference to the element that was animated<br />
b. By reselecting it from the DOM<br />
c. Using the <strong>jQuery</strong> property animatedElement<br />
d. Using the this keyword (optionally wrapped in <strong>jQuery</strong> functionality<br />
($(this))<br />
Have a go hero – doing more with fadeout<br />
A popular implementation that makes use <strong>of</strong> fade-out animations is a "growl" style<br />
messaging system where feedback is provided in the form <strong>of</strong> messages that pop up in the<br />
viewport before fading away; why not create your own growl style messaging system that<br />
utilizes the fadeOut() method.<br />
Fading PNGs in IE<br />
In the previous examples, we've looked at fading in and out using CSS background colors to<br />
illustrate the effect. We could easily extend it to include background images instead, which<br />
generally work just as well, if not better, with this effect.
Change language