《jQuery 1.4 Animation Techniques Beginner's Guide》阅读笔记

《jQuery 1.4 Animation Techniques Beginner's Guide》阅读笔记

第2章 Fading Animation
1).fade系列方法在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.

如下测试代码：
<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>

请分别在IE8-及其它浏览器测试，查看两者间的区别（在IE8-中直接显示隐藏，而在其它浏览器中渐近显示和隐藏）。

2).PNG在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).fadeTo方法的应用场景
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).本章知识小结
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 except 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.