JQuery 1.4 Animation Techniques Beginner's Guide Reading Notes

JQuery 1.4 Animation Techniques Beginner's Guide Reading Notes

Chapter 2 Fading Animation
1). Questions about using fade series methods in IE
IE however, has been known to have issues fading <tr> elements. in IE8 (and lower) for example, the <tr> is shown immediately when the fadeIn () method is used, even with a large duration.

The following test code:
<Button id = "go"> Click </button>
<Table>
<Tbody>
<Tr id = "last" style = "display: none;">
<Td> test1 </td>
<Td> test1 </td>
<Td> test1 </td>
</Tr>
</Tbody>
</Table>
<Script src = "js/jquery. js"> </script>
<Script>
(Function ($ ){
$ ('# Go'). click (function (){
$ ('# Last'). fadeToggle ();
});
}) (JQuery );
</Script>

Test in IE8-and other browsers to see the difference between the two (show and hide directly in IE8-, and show and hide progressively in other browsers ).

2). PNG display problems in IE
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.

There are several different fixes for this issue including:
A). Fading the container of the element instead of the element directly
B). 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.

3) application scenarios of the fadeTo Method
A great application of the fadeTo () method is when it is combined with a modal overlay. often when a pop-up dialog is displayed, the underlying page is screened with a semi-transparent PNG. instead of using an image why not obscure the underlying page by fading an element that covers the entire visible area of the page to semi-transparency instead.

4). Knowledge summary in this Chapter
A ). the fade methods work by altering the opacity and display properties of the selected elements. all methods may accept an optional duration argument in string or integer format before t for the fadeTo () method, with which the argument is mandatory.
B ). transparent PNGs in IE can end up with unsightly black borders when they are faded in or out with jQuery, but there are ways to avoid the issue in all current versions of IE. we also saw that fading table elements can cause problems in IE.
C ). by default, the show (), hide (), and toggle () methods occur instantaneously. however, they can all be used to create animations by supplying a duration and/or easing argument (s ). the duration argument may take integers representing milliseconds, or the strings slow or fast which correspond to durations of 600 or 200 milliseconds.
D). All animations have a default easing of swing, although we can change this to linear for an animation that proceeds at a uniform pace.
E ). CSS can have a huge impact on how animations proceed, as we saw when we looked at how to control the direction that the selected elements grow or shrink when using show () or hide ().
F ). one thing to note with all of the fading animations is that it can cause issues with clearType text in IE; clearType is disabled when the animation runs so any text in the element being animated becomes aliased. there are several different work-arounds for this issue which involve removing the filter attribute once the animation has run.