《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.
分享到:
相关推荐
jQuery for Designers Beginner's Guide Second Edition 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或...
jquery 的经典 英文书 jQuery Plugin Development Beginner’s Guide.PDF
jquery.com官方指定了5本书籍,分别是:《Learning jQuery Third Edition》,《jQuery 1.4 Animation Techniques: Beginners Guide》,《jQuery Plugin Development Beginner's Guide》,《jQuery in Action》和...
☆ 说明如下:☆ [Packt Publishing] jQuery for Designers Beginner's Guide [Packt Publishing] jQuery for Designers Beginner's Guide Source Code
Written with a fast-paced but friendly and engaging approach, this Packt Beginner’s Guide is designed to be placed alongside the computer as your guide and mentor. Step-by-step tutorials are ...
C Programming Absolute Beginner's Guide
Learning Processing_A Beginner’s Guide to Programming Images, Animation, and Interaction;高清;文字版;无水印;加标签
jQuery.1.4.Plugin.Development.Beginner's.Guide.pdf
The Beginner's Guide to IDAPython 6.0 - Alexander Hanel.pdf,The Beginner's Guide to IDAPython 6.0 - Alexander Hanel.pdf,The Beginner's Guide to IDAPython 6.0 - Alexander Hanel.pdf
Eclipse Plug-in Development Beginner s Guide
Java A Beginner's Guide(6th) 英文无水印pdf 第6版 pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系...
Puppet 5 Beginner's Guide(3rd) 英文epub 第3版 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
Packt.jQuery.UI.Themes.Beginner's.Guide
GeoServer Beginner's Guide(2nd) 英文epub 第2版 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction 2nd Edition pdf Learning Processing, Second Edition, is a friendly start-up guide to Processing, a free, open-...
Magento Beginner's Guide
一本相当不错的WebGL开发技术书(英文)
学习青少年编程教程 scratch不错的入门教程
numpy beginner's guide
Absolute Beginner’s Guide to Project Management, Second Edition will have you managing projects in no time! Here’s a small sample of what you’ll learn: * Key concepts and fundamentals behind ...