jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
} var el = $(this); if (el.css("filter")) { el.css("filter", ""); } }); $(".confirm", messageList).remove(); messages.find("a").click(deleteRow); }); 2. Save the new file as fadeToIE.html in the main project folder. [ 45 ] Chapter 2 What just happened? Let's look at what changed in the new version of this example. The first difference is that in the deleteRow function, we store a reference to the element that we are going to fade in a variable called selector (storing jQuery objects in a variable like this is commonly known as caching a selector). We check for the presence of the ActiveXObject on the window object. This object will only exist in IE and so is a useful thing to check for if we are looking to target just IE. If the object is found, we select the elements within the target row instead of the row itself. If the object is not found, we select the itself (as we did in the previous example). The other changes are in the click handler for the delete and cancel elements. All we do is check for the ActiveXObject again and if found, check each element to find which one is empty. One of the rows will be empty because it is the elements that get removed in IE. The empty row is then removed. We have also added a callback function to the animation when the Cancel link is clicked. When IE animates the elements to half opacity, the clearType effect that IE uses for font-smoothing is removed. This is a consequence of the filter being applied, which is how jQuery sets the opacity in IE. Within the new callback function, we check for the presence of the filter attribute, and if it is found, we set to an empty string to disable it. The text will then return to its anti-aliased state.
Fading Animations When we run the new version of the file in IE we should find now that it works as expected in all current versions. Even though we are fading the individual cells in IE instead of the rows, visually it is the same. Because of the conditional checking we do, this version of the example should continue to work in other browsers such as Firefox, Chrome, or Safari as well. As we can see in the previous screenshot, the fades are now working in IE. However, IE still doesn't like fading the elements. It displays a border between the From and Delete columns, even though these cells do not have a border style set on them. IE8 also loses borders when the element is faded back to full opacity. This is not a problem in IE7, and can be fixed in IE8 by removing the background-color from the elements. Showing and hiding By default, jQuery's show(), hide(), and toggle() methods show or hide the selected element by manipulating its display style property. This is an instantaneous effect and does not constitute an animation. [ 46 ]
- 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 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
Fading <strong>Animation</strong>s<br />
When we run the new version <strong>of</strong> the file in IE we should find now that it works as expected<br />
in all current versions. Even though we are fading the individual cells in IE instead <strong>of</strong> the<br />
rows, visually it is the same. Because <strong>of</strong> the conditional checking we do, this version <strong>of</strong> the<br />
example should continue to work in other browsers such as Firefox, Chrome, or Safari<br />
as well.<br />
As we can see in the previous screenshot, the fades are now working in IE. However, IE still<br />
doesn't like fading the elements. It displays a border between the From and Delete<br />
columns, even though these cells do not have a border style set on them. IE8 also loses<br />
borders when the element is faded back to full opacity. This is not a problem in IE7, and<br />
can be fixed in IE8 by removing the background-color from the elements.<br />
Showing and hiding<br />
By default, <strong>jQuery</strong>'s show(), hide(), and toggle() methods show or hide the selected<br />
element by manipulating its display style property. This is an instantaneous effect and<br />
does not constitute an animation.<br />
[ 46 ]
Change language